JS slidetoggle на дереве 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

Я не знаю, сколько это поможет вам. Я также должен был когда-то реализовать Accordian (тумблер) в моем проекте 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

Вы довольно близко. Я думаю, что ключевым компонентом, которого вы не хватает, является предотвращение распространения события click.

Кроме того, чтобы сделать его немного менее изворотливым, вы хотите, чтобы событие щелчка запускалось только в том случае, если прямой родитель цели имеет класс toggleSitemap.

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

Вот пример: http://jsfiddle.net/DkbNA/2/