Question

简而言之，为了使手风琴头更直观，我想在手风琴头的最右侧附加一个展开/折叠，这样当它激活时它将从最初标记为“展开”的地方变为“崩溃”，而我我希望为每个标题做这个。

我已经挖掘了很多例子并且与jsFiddle搞混了。我相信“id's”就是问题，javascript会被n次点击所吸引。在某些情况下，“span”会翻转，而在其他情况下，或者没有任何反应，或者所有的手风琴标题都会被改变。

仍然是jQuery和javascript的新手，我已经讨论了这个问题近几个星期了。有人愿意给我一个正确的方向吗？

HTML ：

<div id="accordion">

<h3>
    <a class="accordion_header_1" href="#">
        Headline 1
        <span style="float:right;">Expand</span>  
        <span style="float:right;display:none;">Collapse</span>
    </a>
</h3>
    <div>Blah blah blah</div>

<h3>
    <a class="accordion_header_2" href="#">
        Headline 2
        <span style="float:right;">Expand</span> 
        <span style="float:right;display:none;">Collapse</span>
    </a>
</h3>
    <div>Blah blah blah</div>

<h3>
    <a class="accordion_header_3" href="#">
        Headline 3
        <span style="float:right;">Expand</span> 
        <span style="float:right;display:none;">Collapse</span>
    </a>
</h3>
    <div>Blah blah blah</div>

</div>

Javascript ：

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

$(".accordion_header_1").click(function() {
    $("span").toggle();
});

小提琴：http://jsfiddle.net/79HeD/1/

Answer 1

您想要使用jQuery accordion API，这样它就不会与点击相关联，而是与手风琴的实际切换相关联。

jQuery().ready(function () {
    jQuery("#accordion").accordion({
        header: "h3",
        collapsible: true,
        active: false,
        heightStyle: "content",
        navigation: true,
        activate: function( event, ui ) {
            ui.newHeader.find('span').toggle();
            ui.oldHeader.find('span').toggle();
        }
    });
});

fiddle

Answer 2

您通常会根据第一个标题元素的点击切换所有跨度。你应该能够解决这些问题：

$('.accordion_header_1').click(function () {
    $(this).children('span').toggle();
});

这是Fiddle

要将事件通常附加到所有标头，请尝试以下操作：

$('.ui-accordion-header').children('a').click(function () {
    $(this).children('span').toggle();
});

这是Fiddle

Answer 3

如果我正确理解你，你可以简单地使用一个公共类和$(this)：

http://jsfiddle.net/isherwood/79HeD/5/

$(".accordion").click(function () {
    $(this).children("span").toggle();
});

Answer 4

纯css解决方案怎么样？ HERE

<h3>
    <a class="accordion_header_1" href="#">
        Headline 1
        <span class="spanexpand" style="float:right;">Expand</span>  
        <span class="spancollapse" style="float:right;display:none;">Collapse</span>
    </a>
</h3>

.ui-state-active > a .spancollapse{
display:block !important;
}
.ui-state-active > a .spanexpand{
display:none !important;
}

注意：我刚刚在第一个h3中添加了跨度类。你可以添加其余部分。

在jQuery手风琴标题中切换span类

4 个答案: