jquery - 获取第三级 ul 以在点击时切换相应的 UL

Question

我目前正在使用一些 uls 并试图找出如何打开第三级链接，如果单击另一个第三级 ul 链接，则该 ul 关闭并打开单击的链接。我有一个二级 UL 的工作代码，只是第三级是令人困惑的，因为我仍处于 jquery 的学习阶段。这是我的代码：

<ul>
         <li>
                    <a href="#" class="button">Humanities</a>
                    <ul class="subul">            
                        <li>
                            <a href="#" class="button-2">Literature</a>
                            <ul class="subsubul">
                                <li>
                                    <a href="">Academic Writing</a>
                                </li>
                                <li>
                                    <a href="">American Literature</a>
                                </li>
                                <li>
                                    <a href="">Biography</a>
                                </li>
                                <li>
                                    <a href="">Classics</a>
                                </li>
                                <li>
                                    <a href="">Comedy</a>
                                </li>
                                <li>
                                    <a href="">Drama</a>
                                </li>
                                <li>
                                    <a href="">European Literature</a>
                                </li>
                                <li>
                                    <a href="">Fiction</a>
                                </li>
                                <li>
                                    <a href="">Nonfiction Prose</a>
                                </li>
                                <li>
                                    <a href="">Poetry</a>
                                </li>
                                <li>
                                    <a href="">Technical Writing</a>
                                </li>
                                <li>
                                    <a href="">Tragedy</a>
                                </li>
                                <li>
                                    <a href="">World Literature</a>
                                </li>
                            </ul>
                        </li>                
                        <li>
                            <a href="{mylink-here}"">Philosophy</a>
                        </li>
                        <li>
                            <a href="#" class="button-2">Religion</a>
                            <ul class="subsubul">
                                <li>
                                    <a href="">Buddhism</a>
                                </li>
                                <li>
                                    <a href="">Christianity</a>
                                </li>
                                <li>
                                    <a href="">Hinduism</a>
                                </li>
                                <li>
                                    <a href="">Islam</a>
                                </li>
                                <li>
                                    <a href="">Judaism</a>
                                </li>
                                <li>
                                    <a href="">Theology</a>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </li>
                <li>
                    <a href="#" class="button">Language</a>
                    <ul class="subul">            
                        <li>
                            <a href="{mylink-here}">Linguistics</a>
                        </li>
                    </ul>
                </li>
     </li>

<script>
    $(document).ready(function() {
        $("ul.subsubul").hide().addClass("subclosed");
        $("a.button-2").each(function() {   
            $(this).click(function() {
                var index = $(this).parent().index();
                $('.subclosed').hide();
                $('.subclosed').eq(index).slideToggle("slow");
            });    
        }); 
        $("ul.subul").hide().addClass("closed");               
        $("a.button").each(function() {   
            $(this).click(function() {
                var index = $(this).parent().index();
                $('.closed').hide();
                $('.closed').eq(index).slideToggle("slow");
            });    
        }); 
    });
</script>

HTML 中可能有一些语法错误，因为我已经简化了我正在使用的大量列表，但这是它的基础。我将 jQuery 设置为将打开和关闭第三级但为每个链接打开相同的第三级 ul 的地步。我现在真的很困惑。任何帮助都非常感谢。

Answer 1

我认为您正在尝试制作手风琴。
使用jquery ui 的手风琴小部件，无需重新发明轮子。

Answer 2

这对你有用；）

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

  <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" />
  <meta name="author" content=""/>
  <meta name="description" content=""/>
  <meta name="keywords" content=""/>
  <title></title>
  <style type="text/css">
  *{margin:0;padding:0;}

  .wrapper{
  display:block;
  width:100px;
  height:200px;      
  margin:0px auto;
  margin-top:40px;
  background-color:black;
  position:relative;
  }

 .wrapper ul
 {
 list-style-type:none;
 overflow:hidden;
 }

 .wrapper ul li ul a{line-height:20px;}

 .active{
 clear:both;
 padding-bottom:3px;
 }

 a{
 color:white;
 display:block;
 width:100px;
 text-decoration:none;
 height:20px;
 text-align:center;
 line-height:20px;
 }

 .service{
 background-color:red;
 display:block;
 width:100px;
 text-decoration:none;
 height:20px;
 text-align:center;
 border-bottom:1px solid #000000;
 outline:none;
 }

 .about{
 background-color:red;
 display:block;
 width:100px;
 text-decoration:none;
 height:20px;
 text-align:center;
 border-bottom:1px solid #000000;
 outline:none;
 }

 .home{
  background-color:red;
  display:block;
  width:100px;
  text-decoration:none;
  height:20px;
  text-align:center;
  border-bottom:1px solid #000000;
  outline:none;
  }

 .contact{
 background-color:red;
 display:block;
 width:100px;
 text-decoration:none;
 height:20px;
 text-align:center;
 border-bottom:1px solid #000000;
 outline:none;
 }

 </style>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">

$(document).ready(function(){
$('.wrapper ul li ul:first').addClass('active');
$('.wrapper ul li ul').hide();  
$('.wrapper ul li a:not(.wrapper ul li ul li a)').click(function(){
 if($('.wrapper ul li a').next('ul').hasClass('active')){         
  $('.active').slideUp('slow');
  $('.active').removeClass('active');
  $(this).next('ul').addClass('active');
  $('.active:not(:animated)').slideDown('slow');
  }
  /*if user clicks like crazy sometimes our active class
      disapears altogether... code below will FIX that :) */ 
 else if($('.active').length===0){   
  $(this).next('ul').addClass('active');
  $('.active:not(:animated)').slideDown('slow');
  }

     });
     });


    </script>
    </head>
    <body>

 <div class="wrapper">
 <ul>
 <li><a class="home" href="#">Home</a>
 <ul>
 <li><a href="#">Link 1</a></li>
 <li><a href="#">Link 2</a></li>
 <li><a href="#">Link 3</a></li>
 </ul>

 </li>


 <li><a class="about" href="#">About Us</a>
 <ul>
 <li><a href="#">Link 1</a></li>
 <li><a href="#">Link 2</a></li>
 <li><a href="#">Link 3</a></li>
 </ul>

 </li>

 <li><a class="service" href="#">Service</a>
 <ul>
 <li><a href="#">Link 1</a></li>
 <li><a href="#">Link 2</a></li>
 <li><a href="#">Link 3</a></li>
 </ul>

 </li>

 <li><a class="contact" href="#">Contact</a>
 <ul>
 <li><a href="#">Link 1</a></li>
 <li><a href="#">Link 2</a></li>
 <li><a href="#">Link 3</a></li>
 </ul>
 </li>
 </ul>