Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   Всплытие событий или что то не так... (https://javascript.ru/forum/jquery/36875-vsplytie-sobytijj-ili-chto-ne-tak.html)

Кирюха =) 30.03.2013 00:46

Всплытие событий или что то не так...
 
Всем привет, жедаю что то вроде раскрывающегося списка, дабы понять всю подноготную событий в 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}). На первой ссылке работает, на второй нет(((( Что делать????

Кирюха =) 30.03.2013 00:51

Конечно есть вариант поставить на каждый уровень свой обработчик, а если у меня их 23 будет??? Пожалуста подскажите что делать, я уже 2 часа гуглю и все впустую

Nubi 30.03.2013 01:11

Кирюха =),
Поставить обработчик на какой объемлющий блок. И внутри обработчика доступен объект event. Вот и можно проверять на каком элементе внутри блока был произведен клик, например по классу:
if (event.target.className == блабла) {
  // делаем то-то...
}

Кирюха =) 30.03.2013 03:53

я уже думал так: но хотелось бы не по классу делать

danik.js 30.03.2013 07:18

Так все блоки раскрыты, как это вообще может работать?
<!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>

Кирюха =) 30.03.2013 10:55

только первые открыты, остальные скрыты

danik.js 30.03.2013 12:56

Цитата:

Сообщение от Кирюха =)
только первые открыты, остальные скрыты

Мне скриншот сделать и запостить для тебя если не веришь?


Часовой пояс GMT +3, время: 15:18.