javascript - 显示/隐藏未嵌套的 Div

Question

正如您将在代码中看到的那样，内部有一个带有 anchor 的列表项，目标是单击 anchor 并显示也在列表项中的 div。

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

JS Fiddle Link

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

我的问题是，当仅适当的 anchor 被点击时，最简单的函数是什么来显示和隐藏.inner-options。

Answer 1

您可以将事件绑定(bind)到 anchor 元素。该事件仅附加到 anchor 而不附加到 div 元素:

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

Working Demo