如何讓我的下拉菜單打開/關閉，當我點擊其父或外

我創建了一個下拉菜單，打開和關閉時，我點擊其父李元素。但是當我把代碼關閉時，當用戶點擊菜單外，這使得點擊父李不再關閉菜單，但只打開它。如何讓我的下拉菜單打開/關閉，當我點擊其父或外

這是html代碼：

<!DOCTYPE html> 
<html> 
<head> 
<script src="https://code.jquery.com/jquery-2.1.4.js"></script> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width"> 
    <title>JS Bin</title> 
</head> 
<body> 
    <ul class="menu"> 
    <li><a href="#">Home</a></li> 
    <li class="dropdown"> 
     <a href="#" class="dropdown-toggle">Courses</a> 
     <ul class="dropdown-menu"> 
     <li><a href="#">JavaScript</a></li> 
     <li><a href="#">Php</a></li> 
     <li><a href="#">Java</a></li> 
     <li><a href="#">Python</a></li> 
     </ul> 
    </li> 
    </ul> 
</body> 
</html>

這是CSS：

*{padding: 0;margin: 0} 
li{list-style-type: none} 
.menu{background: #333;display: block} 
.menu:after, .menu:before{content: '';display: table;clear: both} 
.menu>li{display: inline-block;float: left} 
.menu a{display: block;text-decoration: none;color: #f9f9f9;padding: 6px 10px;background: #333} 
.menu a:hover{ background: #000; } 
.dropdown-menu{position: absolute;max-height: 0;overflow: hidden;transition: max-height 1s ease} 
.open .dropdown-menu{max-height: 30rem}

和jQuery：

(function($){ 
    $('.dropdown-toggle').on('click', function(e){ 
    $(this).parent().toggleClass('open'); 
    $(this).parent().siblings().removeClass('open'); 
    }); 

    // This code to hide the dropdown menu 
    // when the user click outside the menu 

    $(document).on('mouseup', function(e){ 

    $(".dropdown-menu").each(function(index) { 
     if(e.target !== $(this)) { 
     $(this).parent().removeClass('open'); 
     } 
    }); 

    }); 
})(jQuery);

來源

2016-02-05 Omar Ali

你的代碼似乎是工作的罰款。 https://jsfiddle.net/q5eg9cwq/ – Thangaraja

你可以檢查它並解釋問題是什麼？ – Thangaraja

問題是：當你點擊一個下拉菜單時，它會打開菜單，但是當你再次點擊它關閉菜單時，它不起作用。 –

你正在做一個有關文檔點擊檢查與每個元素class='dropdown-menu'。所以if(e.target !== $(this))永遠是真的。您只需要攔截一次條件（我通過比較單擊的元素上的類屬性來完成）並通過每個循環移除類。另外爲了避免事件傳播到$('.dropdown-toggle').on('click'，您將不得不使用e.preventDefault()。

$('.dropdown-toggle').on('click', function(e){ 
    $(this).parent().toggleClass('open'); 
    $(this).parent().siblings().removeClass('open'); 
    }); 

    $(document).on('mouseup', function(e){ 
    var eleNotFound = false; 
    if($(e.target).attr("class") !== "dropdown-toggle") 
    { 
      eleNotFound = true; 
     $(".dropdown-menu").each(function(){ 
      $(this).parent().removeClass('open'); 
     });  
    } 
    if(eleNotFound) 
     e.preventDefault(); 
    });

工作例如：https://jsfiddle.net/DinoMyte/5nqh05b2/2/

來源

2016-02-05 01:47:03 DinoMyte

我也做的HTML一些變化。而不是設置高度，您可以觸發可視性。以下是工作代碼。

(function($) { 
    $('a.dropdown-toggle').on('click', function(event) { 
    var respectivemenu = $(this).next(); 
    $("ul.dropdown-menu").not(respectivemenu).removeClass('open'); 
    respectivemenu.toggleClass('open'); 
    event.stopPropagation(); 
    }); 


    $(document).on('click', function(e) { 
    if ($(this).next().not(".open")) { 
     $(".dropdown-menu").removeClass('open'); 
    } 
    }); 

})(jQuery);

演示：https://jsfiddle.net/q5eg9cwq/3/

來源

2016-02-05 14:57:19 Thangaraja

如果您的代碼中存在多個下拉菜單，則會同時顯示多個下拉菜單 –

謝謝。再次更新代碼 – Thangaraja

我設法使用另一種方法，通過你的答案的幫助來解決這個問題。

jQuery代碼應該是：

(function($){ 
    $('.dropdown-toggle').on('click', function(e){ 
    $(this).parent().toggleClass('open').siblings().removeClass('open'); 
    }); 

    $(document).on('mouseup', function(e){ 
    if (!$(e.target).hasClass('dropdown-toggle')) { 
     $('.dropdown-menu').parent().removeClass('open'); 
    } 
    }); 
})(jQuery);

來源

2016-02-05 15:44:41

如何讓我的下拉菜單打開/關閉，當我點擊其父或外

回答

相關問題