Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 25.02.2014, 15:41
Аватар для Stilus
Новичок на форуме
Отправить личное сообщение для Stilus Посмотреть профиль Найти все сообщения от Stilus
 
Регистрация: 15.01.2014
Сообщений: 6

Не кликабельные ссылки
Добрый день всем.
Помогите догнать как это сделать.
Есть два блока, один с текстом второй с ссылками, который с ссылками по умолчанию скрыт.
Задача:
Если пользователь кликнет по .user-list-item, то нужно .group-info скрыть а блок .group-links показать. Проблема в том, что в момент клика по .user-list-item первый блок скрывается и показывается второй, но происходит еще и переход по ссылке. Именно в этом вся проблема. В момент первого клика, ссылки не должны сробатывать, а вот после должны работать.
$("#user-list li").each(function(){ 
 $(this).on("tap",function(event){ 
	 $(".group-links-wrap").css({"background": "none"});
	 $(".group-links").hide();	
	 $(".group-info").show();
						
	 $(this).find(".group-info").hide();
	 $(this).find(".group-links-wrap").css({"background": "#E35834"});
	$(this).find(".group-links").show();
								
 }); 
});


<li class="user-list-item" >
	<table>
	   <tr>
		<td class="avatar">
								
		</td>
		<td class="group-links-wrap">
		   <div class="group-info">
				....... бла бла ........
		   </div>
		   <div class="group-links" style="display:none;">
			<a href="">Ссылка <a/>
			<a href="">Ссылка <a/>
			<a href="">Ссылка <a/>
			<a href="">Ссылка <a/>
		   </div>
		</td>
	</tr>
    </table>			
</li>
Ответить с цитированием
  #2 (permalink)  
Старый 25.02.2014, 16:31
Аватар для ruslan_mart
Профессор
Отправить личное сообщение для ruslan_mart Посмотреть профиль Найти все сообщения от ruslan_mart
 
Регистрация: 30.04.2012
Сообщений: 3,018

return false или event.preventDefault()
Ответить с цитированием
  #3 (permalink)  
Старый 25.02.2014, 18:19
Аватар для Stilus
Новичок на форуме
Отправить личное сообщение для Stilus Посмотреть профиль Найти все сообщения от Stilus
 
Регистрация: 15.01.2014
Сообщений: 6

Спасибо за быстрый ответ. Если не трудно, можно пример? Прописываю event.preventDefault(), тогда ссылки перестают работать вообще!
$("#user-list li").each(function(){ 
				   $(this).on("tap",function(event){ 
						 
						 $(".group-links-wrap").css({"background": "none"});
						 $(".group-links").hide();	
						 $(".group-info").show();
						
						 
						 $(this).find(".group-info").hide();
						 $(this).find(".group-links-wrap").css({"background": "#E35834"});
						 $(this).find(".group-links").show();
					
						 event.preventDefault();
						
								
				   }); 
				});

Последний раз редактировалось Stilus, 25.02.2014 в 18:28.
Ответить с цитированием
  #4 (permalink)  
Старый 25.02.2014, 20:49
Аватар для Zuenf
Кандидат Javascript-наук
Отправить личное сообщение для Zuenf Посмотреть профиль Найти все сообщения от Zuenf
 
Регистрация: 27.01.2012
Сообщений: 134

Сообщение от Stilus Посмотреть сообщение
В момент первого клика, ссылки не должны сробатывать, а вот после должны работать.
Создай переменную, если false, то открывай, меняй на true и возвращай false, в следующий раз ссылки сработают.

Последний раз редактировалось Zuenf, 25.02.2014 в 20:51.
Ответить с цитированием
  #5 (permalink)  
Старый 25.02.2014, 23:36
Аватар для Stilus
Новичок на форуме
Отправить личное сообщение для Stilus Посмотреть профиль Найти все сообщения от Stilus
 
Регистрация: 15.01.2014
Сообщений: 6

Цитата:
Создай переменную, если false, то открывай, меняй на true и возвращай false, в следующий раз ссылки сработают.
этот вариант почти решает задачу, но есть одно но, таких елементов li у меня в списке выводиться циклом очень много. И когда я по ним разным кликаю, логика теряет смысл.
Ответить с цитированием
  #6 (permalink)  
Старый 25.02.2014, 23:51
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,071

Stilus,
сделали бы макет с css с непонятным
Сообщение от Stilus
("tap",
сейчас можно только гадать как работает ваша логика и что за ссылкки у вас срабатывают
Ответить с цитированием
  #7 (permalink)  
Старый 25.02.2014, 23:58
Аватар для Zuenf
Кандидат Javascript-наук
Отправить личное сообщение для Zuenf Посмотреть профиль Найти все сообщения от Zuenf
 
Регистрация: 27.01.2012
Сообщений: 134

Тогда просто проверяй закрыт ли еще элемент, типа:
if($(this).find(".group-links").css("display") == 'none') return false;

и про замыкания почитай, можно сделать без обращения к ДОМ, как я писал раньше.

Последний раз редактировалось Zuenf, 26.02.2014 в 00:04.
Ответить с цитированием
  #8 (permalink)  
Старый 26.02.2014, 00:33
Аватар для Stilus
Новичок на форуме
Отправить личное сообщение для Stilus Посмотреть профиль Найти все сообщения от Stilus
 
Регистрация: 15.01.2014
Сообщений: 6

Всем большое спасибо, за советы. Особенно благодарен "Zuenf". Проблему решил так:
var ancorIndex;
$(document).on('pageinit pageshow', function(){
	$("#user-list li").each(function(index){ 
	$(this).on("tap",function(event){ 
		$(".group-links-wrap").css({"background": "none"});
		$(".group-links").hide();	
		$(".group-info").show();
								 
		$(this).find(".group-info").hide();
		$(this).find(".group-links-wrap").css({"background": "#E35834"});
$(this).find(".group-links").show();
		if(ancorIndex !=index)
		{
			event.preventDefault();
			ancorIndex = index;
		}
						
 }); 
});
				
});
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Ссылки внутри другой ссылки Madgeniy Events/DOM/Window 4 11.08.2012 14:58
Оформление ссылки сменой плюса на минус vdiapazone Элементы интерфейса 2 29.07.2012 12:10
Ссылки в jQuery mobile Moonlight Мобильный JavaScript 1 05.04.2012 14:11
Необходимо скрыть ссылки, кроме ведущих на изображения Keksman jQuery 4 04.03.2012 20:17
ссылки получали стиль "visited" только на время сессии alexandr_poskrobka Серверные языки и технологии 7 10.03.2010 08:48