1. 首頁
  2. 問答
  3. 獲得第三級ul切換各自的UL點擊

獲得第三級ul切換各自的UL點擊

2013-01-13 28 views
0

我目前正在與一些uls和試圖找出如何獲得第三級開放，如果另一個第三級ul鏈接被點擊那麼ul關閉和點擊一個打開。我有一個令人咋舌的第二級UL代碼，只是第三個代碼讓人困惑，因爲我仍然處於jquery的學習階段。這裏是我的代碼：獲得第三級ul切換各自的UL點擊

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

THRE masy是在HTML一些錯誤的語法時才正如我已經簡單化了大量的名單，我有工作，但是這是它的基本功能。我得到了jQuery的一個點，它將打開並關閉第三級，但爲每個鏈接打開相同的第三級ul。我現在真的很困惑。任何幫助是非常appreaciated。

來源

2013-01-13 Cameeob2003

回答

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-13 07:16:39

相關問題

 相關問題