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>

所以你可以在包装器上放置click handler

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

Answer 2

因为事件冒泡，你需要在点击框中返回false：

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

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

请参阅小提琴：http://jsfiddle.net/maniator/t7dxr/

你可以阅读有关冒泡并尝试阻止它的事情here

Answer 3

我认为你想要这样的事情，只需检查e.target，如果它是.box不要toggle()

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

Code example on jsfiddle

这假设.box中没有其他元素如果有，您最好的选择是将您的选择器调整为.dropdown .text，这样您就不必担心事件冒泡。

Answer 4

检查功能

中正在单击的框

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

jquery，不要选择孩子

4 个答案: