javascript - 单击元素外部以隐藏它，不适用于多个元素

Question

我想在点击外部导航栏时隐藏多个导航栏，这样做是有意义的，但只有其中一个由于一个明显的原因而隐藏。HTML:

<nav class="navigation">
    <ul>
        <li><a href="#" class="navigation-link logo"><b>Aken</b></a></li>
        <li class="right dropdown">
            <a href="#" class="navigation-link nav-trigger">
            Akar Muhamad
            <img  class="profile-picture" src="http://placehold.it/30x30/3498db/333">
            <i class="fa fa-caret-down" aria-hidden="true" style="position: relative; right: 3%;"></i>
            </a>
            <div class="dropdown-content">
                <a href="#">Profile</a>
                <a href="#">Settings</a>
                <a href="http://www.facebook.com">Logout</a>
            </div>
        </li>
        <li class="right dropdown">
            <a href="#" class="navigation-link nav-trigger">
            Akar Muhamad
            <img  class="profile-picture" src="http://placehold.it/30x30/3498db/333">
            <i class="fa fa-caret-down" aria-hidden="true" style="position: relative; right: 3%;"></i>
            </a>
            <div class="dropdown-content">
                <a href="#">Profile</a>
                <a href="#">Settings</a>
                <a href="http://www.facebook.com">Logout</a>
            </div>
        </li>
    </ul>
</nav>

JS:

$('.nav-trigger').on('click', function() {
    // Loop through all the drop-downs, and make all of them invisible
    // Except the one we clicked on.
    $(this).siblings('.dropdown-content').toggleClass('visible');
    var that = this;
    $('.dropdown').each(function() {
        if (that != this) {
            $(this).siblings('.dropdown-content').removeClass('visible');
        }
    });
});


// TODO: Fix a bug where it doesn't work on multiple navigation bars.
$(document).on('click', function(event) {
    if(event.target !== $('.nav-trigger')[0]) {
        $('.dropdown').each(function() {
            $(this).find('.dropdown-content').removeClass('visible');
        });
    }
});

现在，如您所见，我传递了 0 作为要检查的索引。但我想要的是循环遍历所有这些并使用索引作为其关键。每当我这样做时，它根本不起作用，它也禁用了单击显示导航内容的功能。

这是JSBin .

Answer 1

实际上，您不必在这里使用循环，也不需要知道索引。

$('.nav-trigger').on('click', function() {
    // remove visible class from each .dropdown-content:
    $('.dropdown-content').removeClass('visible');
    // add visible class to .dropdown-content next to the clicked .nav-trigger:
    $(this).siblings('.dropdown-content').addClass('visible');
});

$(document).on('click', function(event) {
    // check if the clicked element is .nav-trigger:
    $(event.target).is('.nav-trigger') || 
    // if not, remove visible class from each .dropdown-content:
    $('.dropdown-content').removeClass('visible');
});

JSFiddle Demo