JS滑動在UL樹

Question

當我點擊第二項與slideToggle，第一項關閉。

$(function() { 
    $('.toggleSitemap').find('ul').css('display','none') 
    $('.toggleSitemap').click(function(){ 
     $(this).parent().find('ul').slideToggle('slow'); 
    }); 
}); 

http://jsfiddle.net/qHZsZ/2/

Answer 1

我不知道有多少這能否幫助你。我還需要實現我的MVC項目手風琴（切換）一次，我用的是這樣的：
View.aspx：

<div class='toggle' style="float: left"> 
    <div style="float: left;clear:both;"> 
    <br /> 
     <span class="ulGroup" jqattr="<%:Group.Key %>" style="font-weight: bold;font-color: black;cursor: pointer"><img src="<%: Url.Content("~/Images/imageplus.gif")%>"/> 
      <%:Group.Key%></span> 
    </div> 
    <div class="togglebox" style="clear:both;" > 

     <!-- Write contents as you wish --> 
     <!-- as 
     <ul> test 
     <li>Test1></li> 
     <li>Test2></li> 
     <li>Test3></li> 
     </ul> 
     . 
     . 
     . 
     --> 

    </div> 
</div> 

並稱爲design.js（JavaScript文件）爲：

$(document).ready(function() { 

//Hide the tooglebox when page load 
$(".togglebox").hide(); 

//slide up and down when click over span 
$(".ulGroup").click(function() { 
    var valueText = $(this).attr('jqAttr'); 

    // slide toggle effect set to slow you can set it to fast too. 
    var x = $(this).parent().next(".togglebox").css("display"); 

    if (x == "block") { 
     $(this).text(''); 
     $(this).append($('<img src="../../Images/imageplus.gif"/>')) 
     $(this).append(' ' + valueText); 
    } 
    else { 
     $(this).text(''); 
     $(this).append($('<img src="../../Images/imageplus.gif"/>')) 
     $(this).append(' ' + valueText); 
    } 
    $(this).parent().next(".togglebox").slideToggle("fast"); 
    return true; 
}); 
}); 

Answer 2

你很近。我認爲你缺少的關鍵因素是防止點擊事件的傳播。

另外，爲了讓它不那麼古怪，只需要點擊事件觸發，如果目標的直接父級具有toggleSitemap類。

$(function() { 
    $('.toggleSitemap').click(function(e){ 
     if ($(e.target).parent().hasClass('toggleSitemap')) { 
      e.stopPropagation(); 
      $(this).children('ul').slideToggle('slow'); 
     } 
    }); 
}); 

下面是一個例子：http://jsfiddle.net/DkbNA/2/