在jQuery手风琴标题中切换span类(Toggling a span class within a jQuery accordion header)

在jQuery手风琴标题中切换span类(Toggling a span class within a jQuery accordion header)

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

我已经挖掘了很多例子并且用jsFiddle搞砸了。 我相信“id's”就是问题，javascript会在很多n次点击中被捕获。 在某些情况下，“跨度”变为翻转，而在其他情况下，没有任何事情发生，或者所有的手风琴标题都被改变。

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

In brevity, to make an accordion header intuitive, I want to append an expand / collapse to the far right of the accordion head such that when active it will alter to "collapse" from initially labeled as "expand", and I am hoping to do this for each individual header.

I've dug through numerous examples and messed around with jsFiddle. I believe "id's" are the issue, and the javascript gets caught up in numerous nth clicks. In some instances the "span" becomes flipped, and in other instances either nothing happens, or all accordion headers become altered.

Still a novice in jQuery and javascript, I've been haggling with this problem for nearly weeks. Would anyone be willing to give me a bump in the right direction?

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

Fiddle: http://jsfiddle.net/79HeD/1/

最满意答案

你想使用jQuery手风琴API ，这样它就不会与click相关联，而是与手风琴的实际切换相关联。

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

小提琴

You want to use the jQuery accordion API, such that it is not tied to click but actual toggle of accordion.

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