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

你实际上不必在这里使用循环而你不需要知道index。

$('.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

Answer 2

删除循环并简单地隐藏所有下拉列表。然后在必要时添加您关心的那个。

此代码在点击时存储下拉列表可见性，并在隐藏下拉内容后使用它来切换可见性。这意味着单击标题将同时打开和关闭下拉列表。

$('.nav-trigger').on('click', function(event) {
    // store current dropdown state
    var visible = $(this).siblings('.dropdown-content').hasClass('visible');

    // hide all dropdowns
    $('.dropdown .dropdown-content').removeClass('visible');

    // if we were visible, hide, and vice-versa
    $(this).siblings('.dropdown-content').toggleClass('visible', !visible);

    // prevent document handler from being fired
    event.stopPropagation();
});

// hide all dropdowns if click propagates to document
$(document).on('click', function(event) {
    $('.dropdown .dropdown-content').removeClass('visible');
});

JSBin

单击元素外部以隐藏它，不能使用多个元素

2 个答案: