jQuery Accordion在窗格内的单击链接上折叠

Question

我在页面上创建了一个手风琴，并且希望在每个展开的窗格中都有一些超链接的文本。

当您单击“缩小文本”链接时，它将需要折叠手风琴。

如何通过编辑已使用的现有代码来完成此操作？

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/

希望我已经很好地解释了，这个问题很有意义。

谢谢

Answer 1

我在锚元素上添加了一个click事件，以关闭其对应的手风琴项目：

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

Answer 2

这是可以帮助您的代码。

码

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

小提琴演示