$(function () {
var pull_1 = $('#pull-main-menu');
var menu_1 = $('#mobile-menu');
pull_1.on('click', function (e) {
e.preventDeenter code herefault()
`enter code here`;
menu_1.slideToggle();
});
});
$(function () {
var pull_2 = $('#pull-first-menu');
var menu_2 = $('#first-menu-top-left');
pull_2.on('click', function (e) {
e.preventDefault();
menu_2.slideToggle();
});
});
$(function () {
var pull_3 = $('#pull-second-menu');
var menu_3 = $('#welcome');
pull_3.on('click', function (e) {
e.preventDefault();
menu_3.slideToggle();
});
});HTML:
<a href="#" id="pull-main-menu"></a>
<div id="mobile-menu">
<ul>
<li><a href=""></a></li>
<li><a href=""></a></li>
</ul>
</div>
<a href="#" id="pull-first-menu"></a>
<ul id="first-menu-top-left">
<li><a href=""></a></li>
<li><a href=""></a></li>
<ul>我有三个功能,打开三个不同的菜单在一页。我只是不知道如何为这些函数编写条件,以便在打开新菜单之前关闭打开的菜单。
发布于 2015-06-10 14:20:17
您可以稍微修改html以使用类,并将所有这些函数合并为一个函数。运行下面的代码片段以确保它的工作。
$(document).ready(function(){
$('.ddtoggle').click(function(e){
$(this).next('.ddmenu').slideToggle();
$('.ddmenu').not($(this).next('.ddmenu')).hide()
}).next('.ddmenu').hide();
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<a href="#" class="ddtoggle" id="pull-main-menu">menu 1</a>
<div id="mobile-menu" class="ddmenu">
<ul>
<li><a href="">menu item 1</a>
</li>
<li><a href="">menu item 1</a>
</li>
</ul>
</div>
<a href="#" class="ddtoggle" id="pull-first-menu">menu 2</a>
<ul id="first-menu-top-left" class="ddmenu">
<li><a href="">menu item 2</a>
</li>
<li><a href="">menu item 2</a>
</li>
<ul>
发布于 2015-06-10 14:15:06
您可以为您的a元素使用一个公共类(例如,拉菜单)。在这种情况下,您可以拥有一个函数而不是3:
$(function () {
$(".pull-menu").bind("click", function(evt){
$(".pull-menu").not($(this)).next("ul").hide();
$(this).next("ul").slideToggle();//Or slideDown()
evt.preventDefault();
})
});https://stackoverflow.com/questions/30758344
复制相似问题