Question

我使用html编码和jquery创建了一个菜单，例如

<ul>
    <li>
        level 2
        <ul>
            <li>level 2.1
            <ul>
                <li>a1
                 <li>a2
                    </ul></li>
            <li>b</li>
        </ul>
    </li>
    <li>
        level 3
        <ul>
            <li>
                level 4
                <ul>
                    <li>c</li>
                    <li>d</li>
                </ul>
            </li>

            <li>e</li>
            <li>f</li>
        </ul>
    </li>
</ul>

以上是html编码和jquery，如下所示：

$('li').click(function(ev) {
    $(this).find('>ul').slideToggle();
    ev.stopPropagation();              
});

我得到了输出，例如当我点击2级时它会被展开，但是当我展开3级时，2级也应该崩溃，如果在2级，如果2.1级扩展则应该扩展。请帮助我

Answer 1

仅当您添加结束标记时，传播才有效。

看看这部分：

<li>level 2.1
<ul>
    <li>a1
     <li>a2
        </ul></li>

没有结束</li>代码。

小提琴：http://jsbin.com/ibiceh/1

初始崩溃

在$('li > ul').hide();函数中添加$(document).ready()：

$(document).ready(function(){
    $('li').click(function(ev) {
        $(this).find('>ul').slideToggle();
        ev.stopPropagation();              
    });
    $('li > ul').hide();
});

小提琴：http://jsbin.com/ibiceh/2/

Answer 2

我认为你正在寻找这个：

$(document).ready(function(){
   $('li').click(function(e) {
    e.stopPropagation();
      $(this).children('ul').show();
      $(this).prev().children('ul').hide();
      $(this).siblings().children('ul li ul').hide();
      $(this).next().children('ul').hide();
  }); 
  $('li > ul').hide();
});

结帐：http://jsbin.com/ebapay/1/edit

Answer 3

通过编辑之前给定的代码解决了我的问题。但现在我遇到了一个不同的问题。正如我的Html代码是：

   <body>
            <ul>
                <li><a href="#">Academic Programme</a>
                <ul>
                    <li><a href="#">Under Graduate</a></li>
                    <li><a href="#">Post Graduate</a></li>
                    <li><a href="#">Ph. D</a></li>
                </ul>
            </li>
            <li><a href="#">People</a>
                <ul>
                    <li><a href="#">Director</a>
                    <li><a href="#">Faculty</a>
                            <ul>
                                <li><a href="#">Computer Engineering</a></li>
                                <li><a href="#">Information Technology</a></li>
                                <li><a href="#">Electronics & Communication Engineering</a></li>
                                <li><a href="#">Civil Engineering</a></li>
                                <li><a href="#">Mechanical Engineering</a></li>
                                <li><a href="#">Automobile Engineering</a></li>
                                <li><a href="#">Electrical Engineering</a></li>

                            </ul>
                    <li><a href="#">Technical Staff</a>
                    <li><a href="#">Administrator Staff</a>
                    <li><a href="#">Supporting Staff</a>

                </ul>
            </li>

            <li><a href="#">Department</a>
                    <ul>
                                <li><a href="#">Computer Engineering</a></li>
                                <li><a href="#">Information Technology</a></li>
                                <li><a href="#">Electronics & Communication Engineering</a></li>
                                <li><a href="#">Civil Engineering</a></li>
                                <li><a href="#">Mechanical Engineering</a></li>
                                <li><a href="#">Automobile Engineering</a></li>
                                <li><a href="#">Electrical Engineering</a></li>

                    </ul>
             </li>
             <li><a href="#">Amenities</a></li>
            <li><a href="#">Library

            <li><a href="#">Admission</a>
                    <ul>
                                <li><a href="#">UTU</a></li>
                                <li><a href="#">GTU</a></li>

                    </ul>
            </li>
            <li><a href="#">Student Corner</a></li>
            <li><a href="#">Circular</a></li>
            <li><a href="#">News&Events</a></li>



         </ul>

我的jquery是：

    <script src="jquery-1.7.2.min.js"></script>
    <script type="text/javascript">
       $(document).ready(function(){
                $('li').click(function(ev) {
                 ev.stopPropagation();
           $(this).children('ul').fadeIn();
         $(this).prev().children('ul').children('li').children('ul').fadeOut();    
                   $(this).prev().children('ul').fadeOut();
          $(this).next().children('ul').fadeOut();
         $(this).next().children('ul').children('li').children('ul').fadeOut();    

        }); 

       $('li > ul').hide();

     });

    </script>

    But now i am facing problem of prev and next. Suppose in given HTML form if i had expnaded people then if i will expand admission then people is not collapsed so do any have alternative for prev() and next(). Thank you.

垂直菜单三级使用jquery

3 个答案:

仅当您添加结束标记时，传播才有效。

小提琴：http://jsbin.com/ibiceh/1

初始崩溃

小提琴：http://jsbin.com/ibiceh/2/