如何隱藏用戶點擊一個項目後的下拉菜單？

我一直在使用引導用下面的代碼創建了一個下拉菜單：如何隱藏用戶點擊一個項目後的下拉菜單？

<li class="dropdown"> 
    <a class="dropdown-toggle" data-toggle="dropdown" href="#">Examples </a><ul class="dropdown-menu" id="examples"> 
     <li><a href="#" class="example" id="atlas" data-example-name="atlas">Atlas</a> </li> 
     <li><a href="#" class="example" id="map" data-example-name="map"> Map</a></li> 
    </ul> 
    </li>

但是，我無法隱藏一個下拉菜單，用戶點擊菜單項後。我已經使用jQuery，給下面的代碼嘗試：

$("#atlas").click(function(){ 
    $("#examples").show(); 
})

，但它要求我在一個菜單項單擊兩次（第一次以執行其所需的操作，第二次終於隱藏）。

來源

2016-05-11 ke.li

，我建議你添加一個「切換」級，將顯示在菜單中，您還可以在它添加CSS過渡。（對不起，我沒有時間來建立一個例子）的jQuery將只有一個ToggleClass方法，將添加或刪除 – miguelmpn

你試圖隱藏整個下拉菜單，或只是列表項？ –

只是列表項目 –

我想說

$('.example').click(function(){ $('#examples').hide(); });

來源

2016-05-11 14:42:20 Pietro

這阻止下拉菜單擴展即使點擊。 –

你能更新我的小提琴代碼，給你的問題？ https://jsfiddle.net/arnLfmjk/1/ – Pietro

我似乎無法在小提琴上重現它，但這裏是我正在研究的網站http://brain-vr.com/surfaceviewer/查看示例標籤在左上角。 –

-1

您可以將事件綁定到李本身，隱藏它單擊時：

$('ul li').click(function() { 
    $(this).hide(); 
});

這裏是一個Fiddle Demo。

如果你想使用一個類時，你可以這樣做：

$('.example').click(function() { 
    $(this).hide(); 
});

這裏是一個Fiddle Demo使用類。

來源

2016-05-11 14:55:15

爲什麼downvote on執行OP請求的代碼？ –

我想你想要這段代碼。

下拉菜單顯示總是項目。你點擊一個項目，將其隱藏。

$('.example').on('click', function (event) { 
    event.stopPropagation(); 
    $(this).hide(); 
});

這裏有一個fiddle

來源

2016-05-11 15:02:29 se0kjun

有可以做，以改善這一點，但主要是你只需要點擊一個元素時，調用菜單上隱藏了很多。它工作的Here is a codepen。

// show/hide the menu when examples is clicked 
$(".dropdown-toggle").on("click", function() { 
    $(".dropdown-menu").toggle(); 
}); 

// hide the menu when an exmple is clicked 
$(".example").on("click", function(){ 
    $(".dropdown-menu").hide(); 
});

來源

2016-05-11 15:03:45 lupos

如何隱藏用戶點擊一個項目後的下拉菜單？

回答

相關問題