首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >在新菜单打开之前关闭页面上的其他菜单

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

Stack Overflow用户
提问于 2015-06-10 13:50:41
回答 2查看 493关注 0票数 1
代码语言:javascript
运行
复制
$(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:

代码语言:javascript
运行
复制
<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>

我有三个功能,打开三个不同的菜单在一页。我只是不知道如何为这些函数编写条件,以便在打开新菜单之前关闭打开的菜单。

EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2015-06-10 14:20:17

您可以稍微修改html以使用类,并将所有这些函数合并为一个函数。运行下面的代码片段以确保它的工作。

代码语言:javascript
运行
复制
$(document).ready(function(){
    $('.ddtoggle').click(function(e){
      $(this).next('.ddmenu').slideToggle();  
      $('.ddmenu').not($(this).next('.ddmenu')).hide()
    }).next('.ddmenu').hide();
});
代码语言:javascript
运行
复制
<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>

票数 0
EN

Stack Overflow用户

发布于 2015-06-10 14:15:06

您可以为您的a元素使用一个公共类(例如,拉菜单)。在这种情况下,您可以拥有一个函数而不是3:

代码语言:javascript
运行
复制
$(function () {
    $(".pull-menu").bind("click", function(evt){
       $(".pull-menu").not($(this)).next("ul").hide();
       $(this).next("ul").slideToggle();//Or slideDown()
       evt.preventDefault();

    })
});
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/30758344

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档