-1

我使用 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 级被展开，那么它应该被展开。请帮助我

4

3 回答 3

4

传播仅在您添加结束标签时起作用。

看这部分：

<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/

于 2012-12-24T10:09:17.353 回答
0

我想你正在寻找这个：

$(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

于 2012-12-24T11:05:58.503 回答
-1

我的问题是通过编辑以前给定的代码来解决的。但现在我面临一个不同的问题。因为我的 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.
于 2012-12-26T07:48:32.197 回答