Dropdown与.find（）。first（）和.next（）方法不同
问题描述：
我试图创建一个下拉菜单，当单击按钮（图像）时会打开，当点击任何东西时关闭（同一个按钮，其中一个选项或页面上的某处）。没有徘徊时，我不需要隐藏下拉菜单。一个重要的功能是，下拉必须平滑下滑（我用slideToggle()）。Dropdown与.find（）。first（）和.next（）方法不同
我发现，如果我提到我的下拉使用：
$(this).find('.dropdown-menu').first().slideToggle(150);
根据需要它会自行关闭。但根本没有平稳的下降。另一方面：
$(this).next('.dropdown-menu').slideToggle(150);
会在给定的时间内很好地平滑打开，但这次它不关闭，除非再次点击主按钮。
我该如何结合这两种行为？我找不到任何文档说，slideToggle()将不适用于.find().first()。
答
你的主要错误是，你触发按钮点击，而你应该触发<body>点击，如果你想要做一个动作，当用户点击页面上的任何地方。
请检查下面的代码，我希望这将帮助你
$(document).ready(function(){
\t \t $("body").on("click", function(e) {
\t var clickedElem = e.toElement ; //Get the clicked element
if (clickedElem.type == "button" && $(clickedElem).hasClass("button-m")) { //If we clicked the button element
if ($(".dropdown-menu").attr("data-status") == "opened") { //If list is opened, change the data-status to closed
$(".dropdown-menu").attr("data-status", "closed") ;
}
else {
$(".dropdown-menu").attr("data-status", "opened") ; //If list is not opened, change the data-status to opened
}
$('.dropdown-menu').slideToggle(150); //Toggle Slide
}
else { //If we clicked anywhere other than the button
if ($(".dropdown-menu").attr("data-status") == "opened") { //If the list is opened, close the list
$(".dropdown-menu").attr("data-status", "closed") ;
$('.dropdown-menu').slideToggle(150);
}
}
}) ;
})body{
width: 100%;
height: 500px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="maindiv">
<button type="button" class="button-m button-c" data-toggle="dropdown">
<img class="tile-icon" :src="http://lorempixel.com/50/50/sports">
</button>
<ul class="dropdown-menu" id="dropdown-maps" data-status="opened">
<li>
<a href="#">object 1</a>
</li>
<li>
<a href="#">object 2</a>
</li>
<li>
<a href="#">object 3</a>
</li>
<li>
<a href="#">object 4</a>
</li>
</ul>
</div>我触发<body>点击，如果点击的元素是按钮，则列表会打开和关闭，而如果点击的元素不是按钮，则列表只会关闭。
以获取列表的状态，一data-status标签添加，而我每次打开列表时，更新它/关闭
更新的代码：
下面是更新代码， e.ToElement替换为e.target。
删除slideToggle和使用slideUp和slideDown
测试上的最新版本：
- 谷歌浏览器
- Mozilla Firefox浏览器
- Safari浏览器
- 歌剧
- 互联网浏览
$("body").on("click", function(e) {
\t \t \t \t var clickedElem = e.target ; //Get the clicked element
\t \t \t \t if ($(clickedElem).hasClass("maindiv") || $(clickedElem).parents(".maindiv").length > 0) { //If we clicked the button element
\t \t \t \t \t if ($(".dropdown-menu").attr("data-status") == "opened") { //If list is opened, change the data-status to closed
\t \t \t \t \t \t $(".dropdown-menu").attr("data-status", "closed") ;
\t \t \t \t \t \t $('.dropdown-menu').slideUp(250) ;
\t \t \t \t \t }
\t \t \t \t \t else {
\t \t \t \t \t \t $(".dropdown-menu").attr("data-status", "opened") ; //If list is not opened, change the data-status to opened
\t \t \t \t \t \t $('.dropdown-menu').slideDown(250) ;
\t \t \t \t \t }
\t \t \t \t }
\t \t \t \t else { //If we clicked anywhere other than the button
\t \t \t \t \t if ($(".dropdown-menu").attr("data-status") == "opened") { //If the list is opened, close the list
\t \t \t \t \t \t $(".dropdown-menu").attr("data-status", "closed") ;
\t \t \t \t \t \t $('.dropdown-menu').slideUp(250) ;
\t \t \t \t \t }
\t \t \t \t }
\t \t \t }) ;body{
width: 100%;
height: 500px;
}
.maindiv {
position:absolute;
top:0;
left:0;
}
.dropdown-menu{
display:none;
}
.dropdown-menu li{
display: block;
}<script src='https://code.jquery.com/jquery-2.1.4.min.js'></script>
<script src='https://code.jquery.com/ui/1.11.4/jquery-ui.min.js'></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<div class="maindiv">
\t <button type="button" class="button-m button-c" data-toggle="dropdown">
\t <div>
\t <img class="tile-icon" src="http://lorempixel.com/50/50/abstract"><span>List</span>
\t </div>
\t </button>
\t <ul class="dropdown-menu" id="dropdown-maps" data-status="closed">
\t <li>
\t <a href="#"><img class="button-c" src="http://lorempixel.com/50/50/city"/> <span>Menu 1</span></a>
\t </li>
\t <li>
\t <a href="#"><img class="button-c" src="http://lorempixel.com/50/50/sports"/> <span>Menu 2</span></a>
\t </li>
\t <li>
\t <a href="#"><img class="button-c" src="http://lorempixel.com/50/50/technics"/> <span>Menu 3</span></a>
\t </li>
\t <li>
\t <a href="#"><img class="button-c" src="http://lorempixel.com/50/50/food"/> <span>Menu 4</span></a>
\t </li>
\t </ul>
\t \t </div>
我想立即downvote来是因为旧的jsfiddle由事故粘贴的。现在更正。 – adamczi