Question

我是javascript和jQuery的初学者，并尝试构建幻灯片进/出菜单。如果用户单击子菜单项，则其他子菜单项必须自动滑入。如果单击另一个已打开的父项，则单击父项时也必须执行此操作。

我希望有人可以帮助我

jQuery的：

;(function($) {

// DOM ready
$(function() {

// Append the mobile icon nav
//$('.nav').append($('<div class="nav-mobile"></div>'));

// Add a <span> to every .nav-item that has a <ul> inside
$('.nav-item').has('ul').prepend('<span class="nav-click"><span class="nav-arrow"></span></span>');

// Click to reveal the nav
/*
$('.nav-mobile').click(function(){
    $('.nav-list').toggle();
});
*/

// Dynamic binding to on 'click'
$('.nav-list').on('click', '.nav-click', function(){

// Toggle the nested nav
$(this).siblings('.nav-submenu').slideToggle();

// Toggle the arrow using CSS3 transforms
$(this).children('.nav-arrow').toggleClass('nav-min');

});      
});

})(jQuery);

HTML：

<nav class="nav">
<ul class="nav-list">
    <li class="nav-item">
        <a href="?=home">Home</a>
        <ul class="nav-submenu">
            <li class="nav-submenu-item">
                <a href="?=submenu-1">Submenu item 1</a>
            </li>
            <li class="nav-submenu-item">
                <a href="?=submenu-2">Submenu item 2</a>
            </li>
            <li class="nav-submenu-item">
                <a href="?=submenu-3">Submenu item 3</a>
            </li>
            <li class="nav-submenu-item">
                <a href="?=submenu-4">Submenu item 4</a>
            </li>
        </ul>
    </li>
    <li class="nav-item">
        <a href="?=about">About</a>
    </li>
    <li class="nav-item">
        <a href="?=services">Services</a>
        <ul class="nav-submenu">
            <li class="nav-submenu-item">
                <a href="?=submenu-1">Submenu item 1</a>
            </li>
            <li class="nav-submenu-item">
                <a href="?=submenu-2">Submenu item 2</a>
                <li class="nav-item">
                    <a href="?=services">Services</a>
                    <ul class="nav-submenu">
                        <li class="nav-submenu-item">
                            <a href="?=submenu-1">Submenu item 1</a>
                        </li>
                        <li class="nav-submenu-item">
                            <a href="?=submenu-2">Submenu item 2</a>
                        </li>
                        <li class="nav-submenu-item">
                            <a href="?=submenu-3">Submenu item 3</a>
                        </li>
                        <li class="nav-submenu-item">
                            <a href="?=submenu-4">Submenu item 4</a>
                        </li>
                    </ul>
                </li>
            </li>
            <li class="nav-submenu-item">
                <a href="?=submenu-3">Submenu item 3</a>
            </li>
            <li class="nav-submenu-item">
                <a href="?=submenu-4">Submenu item 4</a>
            </li>
        </ul>
    </li>
    <li class="nav-item">
        <a href="?=portfolio">Portfolio</a>
    </li>
    <li class="nav-item">
        <a href="?=testimonials">Testimonials</a>
    </li>
    <li class="nav-item">
        <a href="?=contact">Contact</a>
    </li>
</ul>
</nav>

CSS：

.nav {
position:relative;
display:inline-block;
font-size:14px;
font-weight:900;
}

.nav-list {
    text-align:left;
}

    .nav-item {
        float:left;
        *display:inline;
        zoom:1;
        position:relative;
    }

    .nav-item a {
        display:block;
        color:#fff;
        padding: 15px 0;
        border-bottom:1px solid rgba(255,255,255,0.1);
    }

    .nav-item a:first-child {
        border-top:1px solid rgba(255,255,255,0.1);
    }

    .nav-item > a:hover {
        color: #ffdd00;
    }

    .nav-item:hover .nav-submenu {
        display:block;
    }

.nav-submenu {
display:none;
position:absolute;
left:0;
width:180px;
}

.nav-submenu-item a,
.nav-submenu .nav-item a {
    display:block;
    padding:15px 15px 15px 30px;
}

.nav-item .nav-submenu .nav-submenu .nav-submenu-item a {
    padding:15px 15px 15px 60px;    
}   

.nav-click {
position:absolute;
top:0;
right:0;
display:none;
height:49px;
width:50px;
cursor:pointer;
}

.nav-click span.nav-arrow {
    display:block;
    height:52px;
    width:52px;
    background-image:url('../images/plus.png');
    background-repeat: no-repeat;
    background-position: center center;
    transition: all 0.2s ease-in-out;       
}

.nav-click span.nav-arrow:hover {
    background-color: rgba(255,255,255,0.1);    
}

.nav-click span.nav-min{
    background-image:url('../images/min.png');
}

@media handheld, only screen and (max-width: 992px), only screen and (max-device-width: 992px) and (orientation: portrait) {
.nav-mobile {
    display:block;
}

.nav {
    width:100%;
    padding: 0 0 0 15px; 
}

.nav-list {
    /* display:none; */
}

.nav-item {
    width:100%;
    float:none;
}
.nav-item > a {
    padding:15px;
}
.nav-click {
    display:block;
}
.nav-mobile-open {
    border-radius:5px 5px 0 0;
    -webkit-border-radius:5px 5px 0 0;
    -moz-border-radius:5px 5px 0 0;
}
.nav-item:hover .nav-submenu {
    display:none;
}
.nav-submenu {
    position:static;
    width:100%;
}
}

当另一个滑出时，如何让我的主菜单和子菜单项滑入？

0 个答案: