UL 트리의 JS 슬라이더 글

Question

슬라이드 끈으로 두 번째 항목을 클릭하면 첫 번째 항목이 닫힙니다.

$(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 (자바 스크립트 파일)라고 :

을

$(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 클래스가있는 경우에만 클릭 이벤트가 발생하기를 원할 것입니다. 당신이 설명대로, http://jsfiddle.net/DkbNA/2/