javascript - UL 树上的 JS 滑动切换

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

你很接近。我认为您缺少的关键要素是防止单击事件的传播。

此外，为了让它不那么古怪，您只希望在目标的直接父级具有toggleSitemap该类时触发 click 事件。

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

这是一个例子：http: //jsfiddle.net/DkbNA/2/

Answer 2

我不知道这对你有多大帮助。我还需要在我的 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;
});
});