我想制作一个类似于本网站中的下拉菜单。我想让 3 件事发生。
- 在点击时显示下拉菜单。
- 一次只显示一个下拉菜单，因此点击另一个下 zipper 接将删除显示的下拉菜单并添加您点击的下拉菜单。
- 在点击同一个下 zipper 接或点击下拉菜单外部时删除显示的下拉菜单。
我不确定我是否需要插件，或者最好的方法是通过编写自己的代码来创建它。
这是我的代码，它运行良好，但唯一的问题是它不会在单击相同的下 zipper 接时删除显示的下拉列表。
$('a#menu1').click(function() {
$("div#1").show();
});
$('a#menu2').click(function() {
$("div#2").show();
});
$('a#menu3').click(function() {
$("div#3").show();
});
$(document).mouseup(function (e)
{
var container = new Array();
container.push($('.display_menu1'));
container.push($('.display_menu2'));
container.push($('.display_menu3'));
$.each(container, function(key, value) {
if (!$(value).is(e.target) // if the target of the click isn't the container...
&& $(value).has(e.target).length === 0) // ... nor a descendant of the container
{
$(value).hide();
}
});
});div.body {
background-color: white;
width: 100%;
height: 400px;
border: 1px solid grey;
}
div.display_menu1 {
display: none;
}
div.display_menu2 {
display: none;
}
div.display_menu3 {
display: none;
}
ul {
margin: 0 0 30px 0;
padding: 0px;
}
li {
display: inline-block;
}
a.display {
display: inline-block;
background-color: lightblue;
padding: 10px 20px;
text-decoration: none;
}
div.display {
background-color: grey;
width: 200px;
height: 100px;
} <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div class="body">
<ul>
<li>
<a href="#" method="POST" id='menu1' class="number">Menu 1</a>
</li>
<li>
<a href="#" method="POST" id='menu2' class="number">Menu 2</a>
</li>
<li>
<a href="#" method="POST" id='menu3' class="number">Menu 3</a>
</li>
</ul>
<div id="1" class="display display_menu1">
This is dropdown-menu 1!
</div>
<div id="2" class="display display_menu2">
This is dropdown-menu 2!
</div>
<div id="3" class="display display_menu3">
This is dropdown-menu 3!
</div>
</div>
</body>最佳答案
好处是使用类而不是 ID .. 所以在我的下一个例子中我使用 data 属性并对所有 div 使用相同的类
$('a[data-menu]').click(function() {
var menu_num = $(this).data('menu'); // get the href data-menu attribute to get the div id from it
$('.display_menu').not($('#'+menu_num)).hide(0); // hide all the divs but not the open one
$('#'+menu_num).slideToggle(100); // toggle the div its already shown .. this slideToggle will show/hide it by clicking the <a>
$('li').not($(this).closest('li')).removeClass('active');
$(this).closest('li').toggleClass('active');
});
$(document).on('click',function (e)
{
// no need here for using array and .each()
if (!$('a[data-menu] , .display_menu').is(e.target) // if the target of the click isn't the container...
&& $('a[data-menu] , .display_menu').has(e.target).length === 0) // ... nor a descendant of the container
{
$('.display_menu').hide(0);
$('li').removeClass('active');
}
});div.body {
background-color: white;
width: 100%;
height: 400px;
border: 1px solid grey;
}
div.display_menu {
display: none;
}
ul {
margin: 0 0 30px 0;
padding: 0px;
}
li {
display: inline-block;
}
a.display {
display: inline-block;
background-color: lightblue;
padding: 10px 20px;
text-decoration: none;
}
div.display {
background-color: grey;
width: 200px;
height: 100px;
}
.active{
background : red;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div class="body">
<ul>
<li>
<a href="#" method="POST" id='menu1' class="number" data-menu="1">Menu 1</a>
</li>
<li>
<a href="#" method="POST" id='menu2' class="number" data-menu="2">Menu 2</a>
</li>
<li>
<a href="#" method="POST" id='menu3' class="number" data-menu="3">Menu 3</a>
</li>
</ul>
<div id="1" class="display display_menu">
This is dropdown-menu 1!
</div>
<div id="2" class="display display_menu">
This is dropdown-menu 2!
</div>
<div id="3" class="display display_menu">
This is dropdown-menu 3!
</div>
</div>
</body>关于javascript - 像在 stackoverflow 中一样创建多个下拉菜单，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44347082/