jquery, не выбирать дочерние элементы

#jquery #jquery-selectors #drop-down-menu

#jquery #jquery-селекторы #выпадающее меню

Вопрос:

Я пытаюсь создать выпадающий список, аналогичный «Самому последнему» окну на Facebook. В принципе, создайте оболочку, содержащую как элементы, вызывающие выпадающий список, так и само поле.

Структура, которая у меня есть, такая:

 <div class="dropdown">
    <div class="text">Click to drop down</div>
    <div class="icon"></div>

    <div class="box" style="display:none">
        foo<br>bar<br>baz
    </div>
</div>

То, что я хочу, по сути, является триггером, подобным:

 $('.dropdown').click(function() {
    $('.box').toggle();
});

Но это также срабатывает при нажатии на само поле.

Итак, мой вопрос в том, как мне запустить обработчик щелчка, когда .выпадающий список нажат, но не .dropdown .box? Я пытался объединить их, но так и не преуспел:

 $('.dropdown not:(.box)')
$('.dropdown').not('.box')

Я бы очень хотел, чтобы мне не приходилось создавать .box как родственный файл для .dropdown, но сохранить его как дочерний.

Ответ №1:

почему бы вам не поместить текст и значок в div элемент?

Я думаю, это будет проще

 <div class="dropdown">
    <div class="wrap">
        <div class="text">Click to drop down</div>
        <div class="icon"></div>
    </div>

    <div class="box" style="display:none">
        foo<br>bar<br>baz
    </div>
</div>

таким образом, вы можете поместить обработчик щелчка в оболочку

 $('.wrap').click(function(e){
  $('.box').toggle();
});

Ответ №2:

из-за переполнения события вам нужно возвращать false при нажатии на поле:

 $('.box').click(function(){return false;});

$('.dropdown').click(function() {
    $('.box').toggle();
});

смотрите скрипку: http://jsfiddle.net/maniator/t7dxr /

вы можете прочитать кое-что о пузырении и попытках предотвратить его здесь

1. Спасибо. Я знал, почему это произошло, просто хотел бы избежать инструкции «return false». Было бы неплохо, если бы вы могли содержать это в одном операторе, таком как $(‘.this :not(.that)).

2. @freeall смотрите ответ @Mark для этой реализации

Ответ №3:

Я думаю, вы хотите что-то подобное, просто проверьте, e.target если это .box не так’ toggle()

 $('.dropdown').click(function(e) {
    if($(e.target).is(".box")){
        return false;
    }
    $('.box').toggle();
});

Пример кода в jsfiddle

Это предполагает, что в .box если есть, то лучше всего настроить ваш селектор таким образом, чтобы он был .dropdown .text , чтобы вам не приходилось беспокоиться о переполнении событий.

Ответ №4:

Проверьте, какое поле нажимается внутри функции

 $('.dropdown').click(function() {
    if ( $(this).attr('class') != box )
        $('.box').toggle();
});