应用display后如何正确显示元素：jQuery无

Question

我遇到了一个非常棘手的问题，我无法通过click事件添加display：none后无法触发下拉菜单。 我以前曾尝试通过悬停事件将其添加回去，但是在某些浏览器中似乎一直触发着它，因此我已经放弃了它并完全陷入困境。 使用以下代码，在切换显示属性后如何再次正确显示下拉列表。

$(document).ready(function() {
    $('li.active ul.sub-menu.dropdown a').click(function() { 
        if($("li.active ul.sub-menu.dropdown").css("display", "block")){
           $("li.active ul.sub-menu.dropdown").hide();
        }
    });
})

道歉，我想早点问类似的问题，但是我之前并不太了解这个问题。 如果我不合时宜，我表示歉意，但我真的很困。 任何帮助是极大的赞赏。

Answer 1

您是否尝试过仅使用.toggle() ？

$(document).ready(function() {
    $('li.active ul.sub-menu.dropdown a').click(function() { 
        $("li.active ul.sub-menu.dropdown").toggle();
    });
})

它会自动检查元素是否可见，然后切换显示属性。

Answer 2

尝试使用show（）函数：

$(document).ready(function() {
    $('li.active ul.sub-menu.dropdown a').click(function() { 
        if($("li.active ul.sub-menu.dropdown").css("display", "block")){
           $("li.active ul.sub-menu.dropdown").hide();
        }
       else if($("li.active ul.sub-menu.dropdown").css("display", "none")){
           $("li.active ul.sub-menu.dropdown").show();
    });
});

Answer 3

我认为，总的来说，最好通过在CSS中添加类来完成这些工作。 您可以执行以下操作：

$(document).ready(function() {
$('li.active ul.sub-menu.dropdown a').click(function() { 
    $("li.active ul.sub-menu.dropdown").toggleClass("show");
});
});

并在CSS中：

.show {
  display:block;
}

当然，使用.show（）和.hide（）也是可行的。 它只会给您更少的控制权。