如何隱藏下拉列表，當我點擊顯示下拉列表的按鈕之外。

我使用的自舉下拉列表中，但我當我不使用jQuery附上我自己的jQuery的吧..我的代碼是在這裏如何隱藏下拉列表，當我點擊顯示下拉列表的按鈕之外。

<button class="btn dropdown-toggle" type="button" data-toggle="dropdown">User Name<span class="caret"></span></button> 
<ul class="dropdown-menu"> 
    <li><a href="#">Profile</a></li> 
    <li><a href="#">Logout</a></li> 
</ul> 

$('.dropdown-toggle').click(function() { 
$('.dropdown-menu').slideToggle(); 
});

，下拉菜單被隱藏在點擊該按鈕外部（隨時隨地體）。但在使用slideToggle函數後，它不會被隱藏。我想要和slideToggle()函數一樣的效果來隱藏下拉菜單！

來源

2017-04-10 Rohit Sharma

的[我如何檢測一個元素之外的點擊？]可能的複製（HTTP：/ /stackoverflow.com/questions/152975/how-do-i-detect-a-click-outside-an-element） –

@DeepakYadav但我想隱藏下拉效果與slideToggle（）函數中的效果相同，我想我不能使用sllideToggle功能在身體點擊...！ –

您已經提出了可能的重複_如何檢測元素外部的點擊？_但我想要另一個同樣的效果，在窗口點擊上我也沒有提到問題標題中的相同效果！對不起！ –

如果我理解你的權利，你要當上任何地方的身體點擊（除按鈕或下拉減少點擊的傳播可能觀察）再次下拉到slideUp。你可以使用下面的代碼。

讓我知道它有助於

看到片段或小提琴>jsfiddle

$('.dropdown-toggle').click(function() { 
 
     $('.dropdown-menu').slideToggle(); 
 
}); 
 
$(document).mouseup(function (e) 
 
{ 
 

 
    if (!$(".dropdown-menu").is(e.target) && 
 
     !$(".dropdown-toggle").is(e.target) && 
 
     $(".dropdown-menu").has(e.target).length === 0 && 
 
     $(".dropdown-toggle").has(e.target).length === 0) 
 
    { 
 
     $(".dropdown-menu").slideUp() 
 
    } 
 
});

section { 
 
\t position:relative 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> 
 

 
<section> 
 
<button class="btn dropdown-toggle" type="button" data-toggle="dropdown">User Name<span class="caret"></span></button> 
 
<ul class="dropdown-menu"> 
 
    <li><a href="#">Profile</a></li> 
 
    <li><a href="#">Logout</a></li> 
 
</ul> 
 
</section>

來源

2017-04-10 08:19:46

謝謝@Mihai ...！這是我想要的答案。 –

很高興我能幫上忙。歡呼！：d –

嘗試

...click(function(e){ 
e.stopPropagation(); 
... 
});

這將通過分層HTML元素

來源

2017-04-10 07:03:16

謝謝您的回答，但是當我使用此代碼時： - '$（'。dropdown-toggle'）。click（function（）{ $（'。dropdown-menu'）。slideToggle（）; } ）; （'。'dropdown-menu'）。hide（）; }）;'我得到我的解決方案，但沒有效果，我想要！ –

我的意思是它沒有必要使用'stopPropagation（）'函數.... –

如何隱藏下拉列表，當我點擊顯示下拉列表的按鈕之外。

回答

相關問題