Question

正如您将看到的那样，代码中有一个列表项，里面有一个锚点，目标是单击锚点并显示同样位于列表项目中的div。

我的代码面临的问题是，如果您单击div信息，它也会隐藏它。我理解为什么我的代码失败了，但不知道如何定位.inner-options作为它自己的元素。

<li class="options">
   <a href="#">Top Options</a>
   <div class="inner-options">
        First Inside Info
    </div>    
</li>
<li class="options">
   <a href="#">Middle Options</a>
   <div class="inner-options">
        Middle Inside Info
    </div>    
</li>
<li class="options">
   <a href="#">Bottom Options</a>
   <div class="inner-options">
        Bottom Inside Info
    </div>    
</li>

.inner-options {
    display: none;
    background: #FFF;
    padding: 10px;
}
li {
    padding: 10px;
    background: #EEE;
    margin-bottom: 20px;
}

$('.options').click(function () {
    var target = $(this).find('.inner-options');

    if ($(target).is(":hidden")) {
        $(target).show(300);
    } else {
        $(target).hide(300);
    }
});

我的问题是，当仅点击相应的锚点时，最简单的使用功能是显示和隐藏.inner-options。

Answer 1

您可以将事件绑定到锚元素。事件只附加到锚而不是div元素：

$('.options a').click(function () {
  var target = $(this).next();
  target.toggle(300)
});

<强> Working Demo

Answer 2

在锚标记上应用click事件，并显示sibling类inner-options。

$('ul').on('click', 'a', function() {
    $(this).siblings('.inner-options').slideToggle(300);
});

演示：https://jsfiddle.net/tusharj/hbhu6e16/2/

Answer 3

试试这个

$('.options a').click(function (e) {
    e.preventDefault();
    var target = $(this).closest('li').find('.inner-options');
    target.fadeToggle(300);
});

Answer 4

我认为Jquery toggle（）是您正在寻找的东西。见here

Answer 5

另一种可能的解决方案是使用event.stopPropagation()：

$('.options').click(function () {
   $(this).find('.inner-options').toggle(); // show/hide == .toggle();
});
$('.inner-options').click(function(e){
   e.stopPropagation(); // stop the event to bubble up in the dom tree.
});

由于$('.inner-options')是$('.options')的孩子，因此如果$('.options')事件发生在子元素click上，则$('.inner-options')上绑定的任何事件都会被执行。

因此，解决方案是使用event.stopPropagation()阻止事件冒泡到父元素。因此，必须在$('.inner-options')上绑定一个点击事件，并使用它来阻止事件冒泡。

显示/隐藏不嵌套的Div

5 个答案: