Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 30.03.2013, 00:46
Аватар для Кирюха =)
Профессор
Отправить личное сообщение для Кирюха =) Посмотреть профиль Найти все сообщения от Кирюха =)
 
Регистрация: 27.07.2011
Сообщений: 207

Всплытие событий или что то не так...
Всем привет, жедаю что то вроде раскрывающегося списка, дабы понять всю подноготную событий в jquery. Вообщес так: есть код html
<body>
   <div id="wrapper">
     <div class="lvl0 wind">
         <div class="head">название 1 <a title="свернуть" class="toggle">-</a></div>
         <div class="cont">
            Какой то вопрос, Какой то вопрос, Какой то вопрос, Какой то вопрос, 
            Какой то вопрос, Какой то вопрос, Какой то вопрос, Какой то вопрос,
            <div class="open">
	           <span class="spn">Ответ1</span>
			   <!--НАЧАЛО ВТОРОЙ ДОЧЕРНИЙ БЛОК, БЛОК УРОВНЯ 1-->
			            <div class="lvl1 wind child">
        	              <div class="head">ответ 1 <a title="свернуть" class="toggle">-</a><a title="свернуть" class="krep"></a></div>
        	              <div class="cont">
         	                Какой то вопрос, Какой то вопрос, Какой то вопрос, Какой то вопрос, 
        	                Какой то вопрос, Какой то вопрос, Какой то вопрос, Какой то вопрос,
            	            <a class="open">
	           	                <span class="spn">Ответ1.2</span>
			   	               <!--НАЧАЛО ВТОРОЙ ДОЧЕРНИЙ БЛОК, БЛОК УРОВНЯ 2-->
			                     	<div class="lvl2 wind child">
        	                     	   <div class="head">ответ 1 <a title="свернуть" class="toggle">-</a><a title="свернуть" class="krep"></a></div>
        	                     	   <div class="cont">
         	                       	   Какой то вопрос, Какой то вопрос, Какой то вопрос, Какой то вопрос, 
        	                       	   Какой то вопрос, Какой то вопрос, Какой то вопрос, Какой то вопрос,
            	                   	   <a class="open">
	           	                       	   <span class="spn">Ответ1.2</span>
			   	                      	   <!--НАЧАЛО ВТОРОЙ ДОЧЕРНИЙ БЛОК, БЛОК УРОВНЯ 3-->
			   
			   	                      	   <!-- КОНЕЦ ВТОРОЙ ДОЧЕРНИЙ БЛОК, БЛОК УРОВНЯ 3-->
		    	                   	   </a><br/>
	        	                   	   Какой то вопрос, Какой то вопрос, Какой то вопрос, Какой то вопрос, 
            	                   	   Какой то вопрос, Какой то вопрос, Какой то вопрос, Какой то вопрос,
            	                   	   <a class="open">
	        	                       <span class="spn">Ответ1.2</span>
	        	                   	   </a>
         	                           </div>
     	                            </div>
			   	               <!-- КОНЕЦ ВТОРОЙ ДОЧЕРНИЙ БЛОК, БЛОК УРОВНЯ 2-->
		    	            </a><br/>
	        	            Какой то вопрос, Какой то вопрос, Какой то вопрос, Какой то вопрос, 
            	            Какой то вопрос, Какой то вопрос, Какой то вопрос, Какой то вопрос,
            	            <a class="open">
	        	                <span class="spn">Ответ1.2</span>
	        	            </a>
         	              </div>
     	                </div>
			   <!-- КОНЕЦ ВТОРОЙ ДОЧЕРНИЙ БЛОК, БЛОК УРОВНЯ 1-->
		    </div><br/>
	        Какой то вопрос, Какой то вопрос, Какой то вопрос, Какой то вопрос, 
            Какой то вопрос, Какой то вопрос, Какой то вопрос, Какой то вопрос,
            <a class="open">
	        <span class="spn">Ответ2</span>
	        </a>
         </div>
     </div>
   </div>
  </body>
</html>

и обработчик к нему конечно же

$('.open span').on('click', function(e){
	   var position = mousePageXY(e);
	   $(this).parent().children('.wind').fadeIn('fast').css({top: position.y-25, left: position.x-20});
	});

Не обращайте внимания на var position = mousePageXY(e); и .css({top: position.y-25, left: position.x-20}). На первой ссылке работает, на второй нет(((( Что делать????
Ответить с цитированием
  #2 (permalink)  
Старый 30.03.2013, 00:51
Аватар для Кирюха =)
Профессор
Отправить личное сообщение для Кирюха =) Посмотреть профиль Найти все сообщения от Кирюха =)
 
Регистрация: 27.07.2011
Сообщений: 207

Конечно есть вариант поставить на каждый уровень свой обработчик, а если у меня их 23 будет??? Пожалуста подскажите что делать, я уже 2 часа гуглю и все впустую
Ответить с цитированием
  #3 (permalink)  
Старый 30.03.2013, 01:11
Аспирант
Отправить личное сообщение для Nubi Посмотреть профиль Найти все сообщения от Nubi
 
Регистрация: 06.08.2008
Сообщений: 43

Кирюха =),
Поставить обработчик на какой объемлющий блок. И внутри обработчика доступен объект event. Вот и можно проверять на каком элементе внутри блока был произведен клик, например по классу:
if (event.target.className == блабла) {
  // делаем то-то...
}
Ответить с цитированием
  #4 (permalink)  
Старый 30.03.2013, 03:53
Аватар для Кирюха =)
Профессор
Отправить личное сообщение для Кирюха =) Посмотреть профиль Найти все сообщения от Кирюха =)
 
Регистрация: 27.07.2011
Сообщений: 207

я уже думал так: но хотелось бы не по классу делать
Ответить с цитированием
  #5 (permalink)  
Старый 30.03.2013, 07:18
Аватар для danik.js
Профессор
Отправить личное сообщение для danik.js Посмотреть профиль Найти все сообщения от danik.js
 
Регистрация: 11.09.2010
Сообщений: 8,804

Так все блоки раскрыты, как это вообще может работать?
<!DOCTYPE html>
<div id="wrapper">
 <div class="lvl0 wind">
     <div class="head">название 1 <a title="свернуть" class="toggle">-</a></div>
     <div class="cont">
        Какой то вопрос, Какой то вопрос, Какой то вопрос, Какой то вопрос,
        Какой то вопрос, Какой то вопрос, Какой то вопрос, Какой то вопрос,
        <div class="open">
           <span class="spn">Ответ1</span>
           <!--НАЧАЛО ВТОРОЙ ДОЧЕРНИЙ БЛОК, БЛОК УРОВНЯ 1-->
                    <div class="lvl1 wind child">
                      <div class="head">ответ 1 <a title="свернуть" class="toggle">-</a><a title="свернуть" class="krep"></a></div>
                      <div class="cont">
                        Какой то вопрос, Какой то вопрос, Какой то вопрос, Какой то вопрос,
                        Какой то вопрос, Какой то вопрос, Какой то вопрос, Какой то вопрос,
                        <a class="open">
                            <span class="spn">Ответ1.2</span>
                           <!--НАЧАЛО ВТОРОЙ ДОЧЕРНИЙ БЛОК, БЛОК УРОВНЯ 2-->
                                <div class="lvl2 wind child">
                                   <div class="head">ответ 1 <a title="свернуть" class="toggle">-</a><a title="свернуть" class="krep"></a></div>
                                   <div class="cont">
                                   Какой то вопрос, Какой то вопрос, Какой то вопрос, Какой то вопрос,
                                   Какой то вопрос, Какой то вопрос, Какой то вопрос, Какой то вопрос,
                                   <a class="open">
                                       <span class="spn">Ответ1.2</span>
                                       <!--НАЧАЛО ВТОРОЙ ДОЧЕРНИЙ БЛОК, БЛОК УРОВНЯ 3-->
            
                                       <!-- КОНЕЦ ВТОРОЙ ДОЧЕРНИЙ БЛОК, БЛОК УРОВНЯ 3-->
                                   </a><br/>
                                   Какой то вопрос, Какой то вопрос, Какой то вопрос, Какой то вопрос,
                                   Какой то вопрос, Какой то вопрос, Какой то вопрос, Какой то вопрос,
                                   <a class="open">
                                   <span class="spn">Ответ1.2</span>
                                   </a>
                                   </div>
                                </div>
                           <!-- КОНЕЦ ВТОРОЙ ДОЧЕРНИЙ БЛОК, БЛОК УРОВНЯ 2-->
                        </a><br/>
                        Какой то вопрос, Какой то вопрос, Какой то вопрос, Какой то вопрос,
                        Какой то вопрос, Какой то вопрос, Какой то вопрос, Какой то вопрос,
                        <a class="open">
                            <span class="spn">Ответ1.2</span>
                        </a>
                      </div>
                    </div>
           <!-- КОНЕЦ ВТОРОЙ ДОЧЕРНИЙ БЛОК, БЛОК УРОВНЯ 1-->
        </div><br/>
        Какой то вопрос, Какой то вопрос, Какой то вопрос, Какой то вопрос,
        Какой то вопрос, Какой то вопрос, Какой то вопрос, Какой то вопрос,
        <a class="open">
        <span class="spn">Ответ2</span>
        </a>
     </div>
 </div>
</div>
<script src="//code.jquery.com/jquery-latest.js"></script>
<script>
$('.open span').on('click', function(e){
       $(this).parent().children('.wind').fadeIn('fast').css({top: e.pageY-25, left: e.pageX-20});
    });
</script>
Ответить с цитированием
  #6 (permalink)  
Старый 30.03.2013, 10:55
Аватар для Кирюха =)
Профессор
Отправить личное сообщение для Кирюха =) Посмотреть профиль Найти все сообщения от Кирюха =)
 
Регистрация: 27.07.2011
Сообщений: 207

только первые открыты, остальные скрыты
Ответить с цитированием
  #7 (permalink)  
Старый 30.03.2013, 12:56
Аватар для danik.js
Профессор
Отправить личное сообщение для danik.js Посмотреть профиль Найти все сообщения от danik.js
 
Регистрация: 11.09.2010
Сообщений: 8,804

Сообщение от Кирюха =)
только первые открыты, остальные скрыты
Мне скриншот сделать и запостить для тебя если не веришь?
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Не получается остановить всплытие событий веснушка Events/DOM/Window 2 27.07.2012 12:24
jQuery bind/on click или JavaScript onClick - что и в каких случаях лучше юзать IVAN86 Events/DOM/Window 21 06.07.2012 08:31
Что занимает меньше памяти, null или undefined? jsuse Общие вопросы Javascript 12 27.05.2012 23:20
фрактальный сыр x-yuri Оффтопик 76 23.11.2011 21:59
Сторонние библиотеки - быть или не быть? IIIEPJIOK Оффтопик 64 21.03.2009 19:39