Question

我是Javascript的新手所以这可能是一个愚蠢的问题，但我不知所措。当选择了正确的列表项时，我一直试图让我的下拉列表隐藏/关闭。我正在使用W3Schools提供的悬停下拉列表。我复制了他们提供的CSS，我的HTML和JS看起来像这样：

<div class="dropdown" id = "menu3">
    <button class="dropbtn" id = "menu3btn">Menu 3</button>
    <div class="dropdown-content" id = "menu3c">
        <ul>
            <li><a id="item30">Cheese</a></li>
            <li><a id="item31">Pepperoni</a></li>
            <li><a id="item32">Sausage</a></li>
        </ul>
    </div>
</div>

和JS：

$(document).ready(function(){
    $('li').click(function(){
        if($(this).text() == "Sausage"){
            $(this).parent().parent().hide();
        }
    }
}

如果用户点击“Sausage”，那么当前的Javascript正在关闭下拉列表，这就是我想要的。但是当我再次将鼠标悬停在菜单上时，下拉列表无法打开/显示。我试过改变

$(this).parent().parent().hide();

要 $（本）.parent（）隐藏（）;

，结果是一样的。

我还尝试通过用以下代码替换parent（）。hide（）代码来切换dropbtn：

var btnName = "#"+$(this).parent().parent().parent().attr("id")+"btn";
$(btnName).toggle();

这完全从屏幕上删除了按钮和下拉菜单。

我还尝试通过将此方法添加到我的JS来强制悬停显示隐藏的下拉内容：

$(".dropdown").hover(function() {
    if($(this).attr("id") == "menu3"){
        $("#menu3c").show();
    }
}

这也没有做任何事情（隐藏的内容保持隐藏）。

非常感谢任何帮助。

Answer 1

您可以使用此功能隐藏父

，而不是$(this).parent().parent().hide();

$(this).closest('div').hide();

再次显示菜单

$('#menu3btn').on('click', function() {
    $('#menu3c').toggle();
});

隐藏（）下拉内容使其消失

1 个答案: