如何在jQuery手风琴的标题中切换文本？ [英] How can I toggle text in the header of the jQuery accordion?

问题描述

我希望我的jQuery手风琴标题中的文本在编辑和关闭之间切换-切换单个面板的打开和关闭时我可以使它工作，但是如果我将面板保持打开状态并单击在其他面板上，前一个面板关闭，但文本仍显示为关闭。

I want text in the header of my jQuery accordion to toggle between "edit" and "close" -- I can get it working when toggling a single panel open and closed, however if I leave a panel open and click on a different panel, the previous panel closes but the text still says "close."

我仍在学习jQuery和JavaScript。我已经尝试了几个小时，但似乎找不到解决方法。任何建议将不胜感激！

I'm still learning jQuery and JavaScript. I've tried for hours, but can't seem to find a solution. Any suggestions would be hugely appreciated!

此jQuery允许我在一个面板上成功切换文本：

This jQuery allows me to toggle the text successfully on one panel:

$(function(){
 $(".details-toggle").click(function () {
  $(this).find(".edit-toggle").text(function(i, text){
      return text === "edit" ? "close" : "edit";
  })
});

JSFIDDLE演示： http://jsfiddle.net/dylanstewart/nvhsyx6n/

JSFIDDLE demo: http://jsfiddle.net/dylanstewart/nvhsyx6n/

推荐答案

只需将所有切换设置为单击编辑，然后使用 ui-state-active 类在激活的标题上设置文本，如下所示：

Just set all the toggles to "edit" whenever one is clicked, then use the ui-state-active class to set the text on the activated header, as follows:

$(".details-toggle").click(function () {
        $(".edit-toggle").text("edit");
        $(".ui-state-active").find(".edit-toggle").text("close");
});

请参见完整的jsfiddle 。

这篇关于如何在jQuery手风琴的标题中切换文本？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！