Всплытие событий или что то не так...
Всем привет, жедаю что то вроде раскрывающегося списка, дабы понять всю подноготную событий в 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}). На первой ссылке работает, на второй нет(((( Что делать???? |
Конечно есть вариант поставить на каждый уровень свой обработчик, а если у меня их 23 будет??? Пожалуста подскажите что делать, я уже 2 часа гуглю и все впустую
|
Кирюха =),
Поставить обработчик на какой объемлющий блок. И внутри обработчика доступен объект event. Вот и можно проверять на каком элементе внутри блока был произведен клик, например по классу:
if (event.target.className == блабла) {
// делаем то-то...
}
|
я уже думал так: но хотелось бы не по классу делать
|
Так все блоки раскрыты, как это вообще может работать?
<!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>
|
только первые открыты, остальные скрыты
|
Цитата:
|
| Часовой пояс GMT +3, время: 18:38. |