0

私は現在、いくつかのulを使用しており、第3レベルを開く方法を見つけようとしています。別の第3レベルのulリンクをクリックすると、そのulが閉じ、クリックしたリンクが開きます。私はまだjqueryの学習段階にあるので、第2レベルのULのコードが壊れています。第3レベルは混乱を招きます。これが私のコードです：

<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番目のレベルを開いたり閉じたりしますが、リンクごとに同じ3番目のレベルのulを開きます。私は今のところ本当に混乱しています。どんな助けでも大いに感謝されます。

4

2 に答える 2

0

これはあなたのために働くでしょう;）

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

于 2013-01-13T07:16:39.623 に答える
0

あなたはアコーディオンを作ろうとしていると思います。jquery ui のアコーディオンウィジェット
を使用します。車輪を再発明する必要はありません。

于 2013-01-13T06:53:36.610 に答える