我有一个菜单，我不知道如何正确使用slideToggle，当我按下另一个按钮时，向下滑动和向上滑动

I have a menu and I don't how to use proprely slideToggle, to slideDown and slideUp when i pressed another li from ul?

本文关键字：另一个 按钮 我不知道 菜单 有一个 何正确 slideToggle      更新时间：2023-09-26

我有一个主菜单的函数:

$('.main-menu-left > li > div').each(function(){
    if( $(this).next('.sub-menu').length ){
        $(this).on('click', function(e){
            e.preventDefault();
            $(this).parent('li').find('.sub-menu').slideDown('slow'); 
        });
    }
});

和一个滑动菜单的功能:

$('body').on('click', function(){
    if( $('.sub-menu').is(':visible') ){
        $('.sub-menu').slideUp();
    }
});

<ul id="menu-left" class="main-menu-left">
<li>
    <div class="group-menu"><span>Browse</span><a id="first-li"><p class="menu-text"><i class="icon-small-arrow-gold"></i>Blinds</p></a></div>
        <ul class="sub-menu">                                                               
            <li><a href=""><span>Explore</span><u>+</u>Wooden Blinds<b>(18 collections)</b></a>
                <ul class="list-products">
                    <div class="container">
                        <div class="row">
                            <div class="col-sm-6 col-md-3 col-lg-3">
                                <li><a class="title">Next day<p class="details">no Samples of Verticals Blinds</p></a></li>
                                <li><a class="title">Blackout<p class="details">96 Samples of Verticals Blinds</p></a></li>
                                <li><a class="title">Pattern<p class="details">120 Samples of Verticals Blinds</p></a></li>
                                <li><a class="title">Wipeable<p class="details">30 Samples of Verticals Blinds</p></a></li>
                            </div>
                            </div>
                            <div class="col-sm-6 col-md-4 col-lg-3">
                                <p class="text-explore">&explore all <s>Vertical Blinds</s> </p> 
                            </div>
                        </div>
                    </div>                                          
                </ul>
            </li>
            <li><a href=""><span>Explore</span><u>+</u>Venetians Blinds<b>(20 collections)</b></a></li>
        </ul>                                       
    </li>
 <li class="hidden-md hidden-sm hidden-xs"><a><p class="menu-text"><i class="icon-small-arrow-gold"></i>Roman</p></a></li>
</ul>

这是html代码，用于我的菜单。

它同时打开和关闭。我该怎么做才能关闭一个li并打开另一个点击呢?

您需要绑定为不同的功能，以便您可以解除绑定，点击主体并将幻灯片打开，幻灯片关闭分开。我是这样写的:

//Wrap it in a function to avoid conflict. Pass in menu as an object we will use inside
(function ($, menu, undefined) {
    //this is the initialiser function
    menu.init = function() {
        //Store the subNavs as a jQuery array so we can loop them
        var subNavs = $('.sub-menu');
        //Check there are members in the array
        if( subNavs.length > 0 ){
            //for each member run the initialiser
            $(subNavs).each(function(i, subNav) {
                //Select the head of the sub-menu in the DOM. In this case it is a sibling
                $(subNav).siblings('.group-menu').on('click', function(e){
                    //prevent the default action of the click and stop it propagating up to the body
                    e.preventDefault();
                    e.stopPropagation();
                    //test if this is an open menu or closed and send each one to a different handler
                    if ($(subNav).hasClass('open')) {
                        menu.clickOff($(subNav));
                    }
                    else {
                        menu.clickOn($(subNav));
                    }
                });
            });
        }
    };
    menu.clickOn = function(el) {
        //set the element as 'open'
        el.addClass('open');
        //bind the body click handler
        $('body').on('click', menu.clickBody);
        //Do the slide down!
        el.slideDown('slow');
    };
    menu.clickOff = function(el) {
        //set the element as not 'open'            
        el.removeClass('open');
        $('body').unbind('click', menu.clickBody);
        //Do the slide up!
        el.slideUp('slow');
    };
    menu.clickBody = function(e) {
        //check if the target is the open menu item itself or part of it
        if ($(e.target).closest('.sub-menu.open').length == 0) {
            //If not, pass it through to the close handler
            menu.clickOff($('.sub-menu.open'));
        }
    };
    //call the initialiser() on page load
    menu.init();
}(jQuery, window.menu = window.menu || {}, ""));

你可以在这里查看它的内容:http://fiddle.jshell.net/h6Xnb/2/

希望能有所帮助。

相关文章：