Question

我目前正在处理一些问题，并试图找出如何打开第三级，如果点击了另一个第三级ul链接，那么ul关闭并且点击的那个打开。我有第二级UL的wroking代码，因为我还处于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中有一些sytax错误。我得到了jQuery，它将打开并关闭第三级，但为每个链接打开相同的第3级ul。我现在真的很困惑。任何帮助都是很有帮助的。

Answer 1

我认为你正在努力建造一支手风琴使用jquery ui's accordion小部件，无需重新发明轮子。

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>

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

2 个答案: