在 jQuery 手风琴头中切换跨度类答案

【问题标题】：Toggling a span class within a jQuery accordion header在 jQuery 手风琴头中切换跨度类
【发布时间】：2014-02-11 05:39:14
【问题描述】：

简而言之，为了使手风琴标题直观，我想在手风琴头的最右侧附加一个展开/折叠，这样当它处于活动状态时，它会从最初标记为“展开”变为“折叠”，并且我我希望对每个单独的标题都这样做。

我已经挖掘了许多示例，并弄乱了 jsFiddle。我相信“id”是问题所在，并且 javascript 被无数次点击所吸引。在某些情况下，“跨度”会被翻转，而在其他情况下，要么什么都没有发生，要么所有的手风琴标题都被改变了。

仍然是 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/

【问题讨论】：

标签： jquery toggle accordion html

【解决方案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

【讨论】：

规定的规则我不能说“谢谢”，所以我很抱歉这么久的缺席。但是现在我可以了，因为直到有人向我指出 ui-icon ui-icon-triangle-1-s 在激活切换时消失了，所以我才意识到这一点。关于保留三角形的任何想法？感谢您回答我最初的问题。
您可以将其添加到您的 CSS，.ui-icon-triangle-1-s { display: block !important; }，似乎遇到此问题的其他人正在加载手风琴脚本两次或其他什么。如果您正在加载 jQuery UI，则不需要单独的手风琴脚本。
不，这样做了，我添加了一个.ui-icon-triangle-1-e { display: block !important; }，就成功了。再次感谢！小提琴：jsfiddle.net/79HeD/8

【解决方案2】：

您通常会根据第一个标题元素的点击来切换所有跨度。您应该能够通过以下方式解决所有问题：

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

这是Fiddle

要将事件一般附加到所有标题，请尝试以下操作：

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

这是Fiddle

【讨论】：

【解决方案3】：

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

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

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

【讨论】：

【解决方案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 中向 span 添加了类。您可以添加其余部分。

【讨论】：