0

我现在正在尝试为内容查询 webpart 实现手风琴功能。

基本上，内容查询结构是这样的： Title Content I want to expand collapse 

<li class="dwft-item">
<div class="link-item"> Title </div>
<div class="description"> Content I want to expand collapse </div>
</li>



<li class="dwft-item">
<div class="link-item"> Title </div>
<div class="description"> Content I want to expand collapse </div>
</li>




<li class="dwft-item">
<div class="link-item"> Title </div>
<div class="description"> Content I want to expand collapse </div>
</li>

我有 3-5 个。

我现在要做的是每当我单击相应的链接项（标题）div 时展开折叠描述 div。

这是我的 JS 代码：

$(document).ready(function () {
    //ACCORDION BUTTON ACTION
    $('#MSOZoneCell_WebPartWPQ3 .link-item').click(function () {
        //MAKE THE ACCORDION CLOSE ON THE SECOND CLICK
        if ($('#MSOZoneCell_WebPartWPQ3 .description').hasClass('openDiv')) {
            $('#MSOZoneCell_WebPartWPQ3 .description').toggle('normal');
            $(this).next().removeClass('openDiv');
        } else {
            $('#MSOZoneCell_WebPartWPQ3 .description').toggle('normal');
            $(this).next().toggle('normal');
            $(this).next().addClass('openDiv');
        }
    });
    //HIDE THE DIVS ON PAGE LOAD
    $("#MSOZoneCell_WebPartWPQ3 .description").hide();
});

我现在遇到的问题是，每当我单击任何一个标题时，所有描述 div 都会展开，这不是我想要的，因为我只想要我单击展开的标题下的特定描述。

这里的任何帮助将不胜感激！谢谢！！

4

1 回答 1

0

检查这些，我认为其中之一应该是您想要的。您this在添加/删除类时使用是正确的，您只需要为切换执行此操作：

http://jsfiddle.net/7dcj4/

$(document).ready(function () {
    //ACCORDION BUTTON ACTION
    $('#MSOZoneCell_WebPartWPQ3 .link-item').click(function () {
        //MAKE THE ACCORDION CLOSE ON THE SECOND CLICK
        var $content = $(this).siblings('.description');

        var visible = $content.is(':visible');

        $("#MSOZoneCell_WebPartWPQ3 .description:visible").toggle('normal');

        if (!visible)
            $content.toggle('normal');

    });
    //HIDE THE DIVS ON PAGE LOAD
    $("#MSOZoneCell_WebPartWPQ3 .description").hide();
});

http://jsfiddle.net/uBnrV/

$(document).ready(function () {
    //ACCORDION BUTTON ACTION
    $('#MSOZoneCell_WebPartWPQ3 .link-item').click(function () {
        //MAKE THE ACCORDION CLOSE ON THE SECOND CLICK
        $(this).siblings('.description').toggle('normal');
    });
    //HIDE THE DIVS ON PAGE LOAD
    $("#MSOZoneCell_WebPartWPQ3 .description").hide();
});
于 2013-09-27T21:35:28.577 回答