應用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（）也是可行的。 它只會給您更少的控制權。