Sharepoint 2010内容查询手风琴 [英] Accordion on Sharepoint 2010 content query

问题描述

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

I am now trying to implement the accordion function for a content query webpart.

基本上，内容查询结构如下：

标题
内容我想扩展折叠

Basically, the content query structure looks like this: 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。

What I want to do now is to expand collapse the description div whenever I click on the corresponding link-item (title) 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扩展，这不是我想要的，因为我只需要单击标题下的特定描述即可。

The problem I have now is that whenever I click on any one of the titles, ALL the description div expands, which is not what I want because I want only that particular description under the title I clicked to expand.

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

Any help here will be much appreciated here ! Thanks!!

推荐答案

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

Check these, I think one of them should be what you want. You were right to use this when adding/removing classes, you just needed to do that for the toggle as well:

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();
});

这篇关于Sharepoint 2010内容查询手风琴的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！