Question

我有这个代码用于我在我的网站上使用的简单导航菜单，它只是在点击时显示隐藏的div，还检查它是否已被点击已经购买了另一个按钮。因为我不是jQuery的专家，所以我想帮助我提高代码效率。

现在它的两个按钮显示一些隐藏的div的相同代码，我想让它更加统一，如果我添加一个新按钮，我不必复制和粘贴具有不同ID的相同代码。< / p>

//导航菜单

jQuery(function( $ ){
    // Get a reference to the container.
    var container = $( "#servicesSubMenu" );
    var container2 = $( "#productsSubMenu" );
    // Bind the link to toggle the slide.
    $( "#servicesMenu" ).click(
            function( event ){
                // Prevent the default event.
                event.preventDefault();
                // Toggle the slide based on its current
                // visibility.
                if (container.is( ":visible" )){
                    // Hide - slide up.
                    container.slideUp( 1100 );
                    jQuery("#servicesMenu").removeClass('current');
                }
                else if (container2.is( ":visible" )){
                    // Hide - slide up.
                    container2.slideUp( 20 );
                    jQuery("#productsMenu").removeClass('current');
                    container.slideDown( 20 );
                    jQuery("#servicesMenu").addClass('current');
                }                    
                else {
                    // Show - slide down.
                    container.slideDown( 1100 );
                    jQuery("#servicesMenu").addClass('current');

                }
            }
            );
    $( "#productsMenu" ).click(
            function( event ){
                // Prevent the default event.
                event.preventDefault();
                // Toggle the slide based on its current
                // visibility.
                if (container2.is( ":visible" )){
                    // Hide - slide up.
                    container2.slideUp( 1100 );
                    jQuery("#productsMenu").removeClass('current');
                } 
                else if (container.is( ":visible" )){
                    // Hide - slide up.
                    container.slideUp( 20 );
                    jQuery("#servicesMenu").removeClass('current');
                    container2.slideDown( 20 );
                    jQuery("#productsMenu").addClass('current');
                } 
                else {
                    // Show - slide down.
                    container2.slideDown( 1100 );
                    jQuery("#productsMenu").addClass('current');
                }
            }
            );

});

    // end navigation menu
<nav>
    <ul id="menu">
        <li><a href="#">Company</a></li>
        <li id="servicesMenu" class="dropDown"><a href="#">Services</a></li>
        <li id="productsMenu" class="dropDown"><a href="#">Products</a></li>
        <li><a href="#">Contacts</a></li>
    </ul>
</nav>  
<div id="servicesSubMenu" class="slideDown">
    <div class="shadow"></div>
        <ul class="sub-menu">
            <li><a href="#">Oil Change</a><a href="#">Powder Coating</a><a href="#">Welding</a></li>
        <li><a href="#">Installation</a><a href="#">Fender Rolling</a><a href="#">Machining</a></li>
        </ul>
    <div class="shadow_botm"></div>
</div>
<div id="productsSubMenu" class="slideDown">
    <div class="shadow"></div>
        <ul class="sub-menu">
            <li><a href="#">Coilovers</a><a href="#">Exhaust systems</a><a href="#">Rims</a></li>
        <li><a href="#">Turbo Kits</a><a href="#">Superchargers</a><a href="#">Misc</a></li>
        </ul>
    <div class="shadow_botm"></div>
</div>

Answer 1

如果您<div>容器的排列方式与menu buttons相对应，则您可以使用buttons 索引来定位相应的容器。

jQuery(function ($) {
    var containers = $('.slideDown');
    var menuBtns = $('.dropDown');

    menuBtns.click(function (event) {
        // Prevent the default event.
        event.preventDefault();
        //get the target container base on the clicked buttons index      
        var targetContainer = containers.eq($(this).index('.dropDown'));

        //show the target container and add class current
        targetContainer.slideDown(1100).addClass('current');

        //slideUp container that is not the target and remove current class
        containers.not(targetContainer).slideUp(1100).removeClass('current');
    });
});

在此处查看演示：http://jsfiddle.net/hyTY8/

如果您想在两次点击同一按钮时将容器设为slideUp，则可以使用slideToggle()代替slideDown()。您还可以使用current切换课程toggleClass()。

更新了小提琴：http://jsfiddle.net/hyTY8/2/

Answer 2

为了这个目的，我建议使用jQuery库，这样你就可以得到一个干净优雅的菜单。见

http://www.menucool.com/vertical/accordion-menu

http://jqueryui.com/accordion/

您可以使用它们，并根据要求进行自定义。

带隐藏div的滑动菜单

2 个答案: