Question

我已在下面为移动导航编写了此代码。一切都运作良好，但在开通UL时，我希望其他UL关闭。有谁知道怎么写这个？

小提琴代码： - http://jsfiddle.net/t7gucozm/4/

$('nav > ul li a').on('click', function (ev) {
    if ($(this).next('ul').length > 0) {
        if ($(this).hasClass('opened')) {

        } else {
            $(this).addClass('opened');
            $(this).next('ul').show();
            ev.preventDefault();
        }
    } else {

    }
});

Answer 1

只需使用：

$('nav > ul li a').on('click', function (ev) {
    if ($(this).next('ul').length > 0) {
        if ($(this).hasClass('opened')) {
            $(".opened").removeClass('opened');
        } else {
            $(this).addClass('opened');
            $(this).next('ul').show();
            ev.preventDefault();
        } 
    } else {

    }
});

Answer 2

$('nav > ul li a').on('click', function (ev) {
      ev.preventDefault();
    if ($(this).next('ul').length > 0) {
        if ($(this).hasClass('opened')) {
            $(".opened").removeClass('opened');
            $(this).next('ul').hide()
        } else {
            console.log($('li'))
            $('li a').each(function () {
                 $(this).removeClass('opened')
                 $(this).next('ul').hide()
            });


            $(this).addClass('opened');
            $(this).next('ul').show();

        } 
    } 
});

Answer 3

我已经用css单独处理了类似的情况

如果你想要一个严格的Jquery解决方案，请告诉我。

http://jsfiddle.net/arunzo/t7gucozm/5/

ul li ul {
    display:none;
}

nav>ul>li>a:focus+ul{
    display:block;
}

Answer 4

            $('nav > ul li a').on('click', function (ev) {
                if (!$(this).hasClass('opened')) 
                    $('nav .opened').removeClass('opened').next().hide();

                if ($(this).next('ul').length > 0) {
                    if ($(this).hasClass('opened')) {

                    } else {
                        $(this).addClass('opened');
                        $(this).next('ul').show();
                        ev.preventDefault();
                    } 
                } else {

                }
            });

Answer 5

请检查一下。

以下是更新后的fiddle 。

我已将 class =“li-lable”添加到每个家长 li a

像这样一个

<li>
      <a class="li-lable" href="#">child4</a>
           <ul>
               <li><a href="#">child41</a>
               </li>
               <li><a href="#">child42</a>
               </li>
               <li><a href="#">child43</a>
               </li>
           </ul>
</li>

JS -

$('nav ul li a ').on('click', function (ev) {
if ($(this).next('ul').length > 0) {

    $(this).parent().siblings().children().not(".li-lable").fadeOut()

     $(this).next('ul').find('li ul').hide()
     $(this).next('ul').fadeIn()

} else {
    alert('no submenu, redirect');
}

}）;

点击关闭所有其他UL

5 个答案: