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:
$(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();
});
$(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屋!