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项目中实现一次Accian（toggle），我使用了这样的东西：
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类，则只需要触发click事件。

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

以下是一个示例： http://jsfiddle.net/DkbNA/2/

JS树上的JS幻灯片

2 个答案: