jQuery Accordion 在窗格内单击链接时折叠答案

【问题标题】：jQuery Accordion collapse on click link inside panejQuery Accordion 在窗格内单击链接时折叠
【发布时间】：2014-02-19 20:48:20
【问题描述】：

我在我的页面上创建了一个手风琴，我希望能够在每个展开的窗格中包含一些超链接文本。

当您单击“减少文本”链接时，需要折叠手风琴。

如何通过编辑我使用的现有代码来完成？

jQuery:

$(function() {
    $( "#accordion" ).accordion({
        active: false,
        collapsible: true,
        heightStyle: "content",
        navigation: true,
        header: ".menuitem"
     });

    var hash = window.location.hash;
    var anchor = $('a[href$="'+hash+'"]');
    if (anchor.length > 0){
        anchor.click();
    }
});

HTML：

<div id="accordion">
<h3 class="menuitem">Item 1</h3>
<div>
<p>Blah blah blah</p>
<a href="#">Reduce text</a>
</div>

<h3 class="menuitem">Item 1</h3>
<div>
<p>Blah blah blah</p>
<a href="#">Reduce text</a>
</div>

<div id="accordion">
<div>
<h3 class="menuitem">Item 1</h3>
<p>Blah blah blah</p>
<a href="#">Reduce text</a>
</div></div>

JS 小提琴：http://jsfiddle.net/EA22W/

希望我已经解释得很好并且这个问题是有道理的。

谢谢

【问题讨论】：

减少文本在哪里？现在点击锚点会发生什么？
我刚刚编辑了 HTML，Reduce 文本链接就在它应该在的地方（目前它什么都不做）。我只需要该链接在单击时折叠手风琴窗格。
你能在fiddle中建立一个最小的例子吗？
这里有一些答案：stackoverflow.com/questions/4681320/… 它基本上归结为在点击缩小文本链接时将手风琴活动参数设置为 false。
嗨@Jai，这是 JS 小提琴：jsfiddle.net/EA22W

标签： javascript jquery jquery-ui-accordion

【解决方案1】：

我在锚元素上添加了一个点击事件来关闭其相应的手风琴项：

$(function() {
$( "#accordion" ).accordion({
    active: false,
    collapsible: true,
    heightStyle: "content",
    navigation: true,
    header: ".menuitem"
 });

var hash = window.location.hash;
var anchor = $('a[href$="'+hash+'"]');
if (anchor.length > 0){
    anchor.click();
}

//$("#accordion").on('click', '.ui-accordion-content a', function(){
$("#accordion").on('click', '.ui-accordion-content .reduce', function(){ //edit
    $(this).parent().slideToggle();
});
});

【讨论】：

嗨@Andrei Cristian Prodan，谢谢。似乎工作。我在窗格中添加了一些其他超链接作为内容，当我单击它们时，它与您的代码略有冲突。有没有办法让这个只对“reduce”类的链接起作用？
是的，只需将 add class reduce 替换为第二个参数的 on 事件，如下所示：.on('click', '.ui-accordion-content a.reduce', function() .. ..
或最终将其保留为 .reduce 而不是 a.reduce 因为将来您可能希望将该锚点转换为 div 或其他元素

【解决方案2】：

这是可以帮助你的代码。

代码

function accordianReduce(){
    $( "#accordion" ).accordion({
        active: false,
        collapsible: true,
        heightStyle: "content",
        navigation: true,
        header: ".menuitem"
     });  
}
accordianReduce()
$('.reduce').on('click', function(){
    accordianReduce() 
})

Fiddle Demo

【讨论】：