如何隐藏下拉列表，当我点击显示下拉列表的按钮之外。

我使用的自举下拉列表中，但我当我不使用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（）'函数.... –

如何隐藏下拉列表，当我点击显示下拉列表的按钮之外。

回答

相关问题