Question

$(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>

我有3个功能，可在页面上打开3个不同的菜单。我只是无法弄清楚如何编写这些函数的条件，这些函数会在新的菜单打开之前关闭打开的菜单。

Answer 1

您可以为元素使用公共类（例如pull-menu）。在这种情况下，您可以使用一个函数而不是3：

$(function () {
    $(".pull-menu").bind("click", function(evt){
       $(".pull-menu").not($(this)).next("ul").hide();
       $(this).next("ul").slideToggle();//Or slideDown()
       evt.preventDefault();

    })
});

Answer 2

您可以稍微更改html以使用类，并将所有这些功能合并为一个。运行下面的代码段以查看它是否有效。

＆＃13;

$(document).ready(function(){
    $('.ddtoggle').click(function(e){
      $(this).next('.ddmenu').slideToggle();  
      $('.ddmenu').not($(this).next('.ddmenu')).hide()
    }).next('.ddmenu').hide();
});

＆＃13;

<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>

＆＃13;

在新打开之前关闭页面上的其他菜单

2 个答案: