JQuery, не выбирайте детей

Question

Я пытаюсь создать выпадающий список, аналогичный окну «Самые последние» на 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, но не .dropdown .box? Я пытался объединить их, но никогда не получалось:

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

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

Answer 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();
});

Answer 2

Проверьте, какая ячейка щелкается внутри функции

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

Answer 3

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

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

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

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

Answer 4

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

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

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

см. Фиддл: http://jsfiddle.net/maniator/t7dxr/

вы можете прочитать кое-что о всплывающих подсказках и попытаться предотвратить их здесь