点击切换div文本

Question

这是我的jQuery。

jQuery(document).ready(function($) {
    $("#accordion").find(".accordion-toggle").click(function(){
        $(this).next().slideToggle("fast");
        $(".accordion-content").not($(this).next()).slideUp("fast");
    });
});

这是我的HTML代码

<div id="accordion">
    <header class="accordion-toggle">
         <h2>Accordion Title <span id="accordionIcon">▼</span></h2>
    </header>
    <section class="entry accordion-content">
        <p>Accordion Content</p>
    </section>
</div>

每当单击新的accordion-toggle时，我需要旧的accordionIcon更改为相反的箭头，并且也更改新的箭头。我尝试使用$(".accordion-content").not($(this).next()).parent().find('#accordionIcon')进行操作，但它无法找到正确的元素。

- Curtis

---

“new one to change also” 是什么意思？ - Derek Story

他想切换图标。 - w3spi

您正在通过类选择accordionIcon，而不是通过id选择。 您可以使用（'#accordionIcon'）简单地选择具有id accordionIcon的元素。 请记住，所有id都应该是唯一的。 - Chad McGrath

Answer 1

这里有一个示例，这是你需要的吗？

这是我添加的代码。

if($(this).find("span#accordionIcon").text()=="▼"){
    $(this).find("span#accordionIcon").text("▲");
}
else{
    $(this).find("span#accordionIcon").text("▼");
}

- Soubhik Mondal

---

你要找的字符是 '▲'。 - MinusFour

谢谢:P 我到处搜索，但找不到它。 - Soubhik Mondal

最好使用addClass，因为如果用户遇到特殊字符的问题，这段代码将无法工作！而下面的代码则始终可用。 - w3spi

我认为最好使用类似于font-awesome的东西来显示符号，而不是依赖于实际的特殊字符。 - Soubhik Mondal

我已经添加了一个带有字体图标的解决方案 :) - Amani Ben Azzouz

Answer 2

接受的答案只适用于一个切换开关。 这是适用于多个切换开关的版本(Codepen)：

HTML

<div id="accordion">
    <header class="accordion-toggle">
         <h2>Accordion Title 1<span>▲</span></h2>
    </header>
    <section class="entry accordion-content">
        <p>Accordion Content</p>
    </section>
    <header class="accordion-toggle">
         <h2>Accordion Title 2<span>▲</span></h2>
    </header>
    <section class="entry accordion-content">
        <p>Accordion Content</p>
    </section>
</div>

JS

jQuery(document).ready(function($) {
    $("#accordion").find(".accordion-toggle").click(function(){
        if ($(this).find('span').text() == '▼') {
          $(this).siblings(".accordion-content").slideUp("fast");
          $(this).siblings(".accordion-toggle").find('span').text('▼');
          $(this).next().slideDown("fast");
          $(this).find('span').text('▲');
        } else {
          $(this).next().slideUp("fast");
          $(this).find('span').text('▼');
        }
    });
});

- Jevgenijs Šulins

Answer 3

或者不改变你的代码，你可以这样做：

jQuery(document).ready(function($) {
    $("#accordion").find(".accordion-toggle").click(function(){
        var span = $(this).find('span');
        if (span.hasClass('isOpened')) {
            span.removeClass('isOpened').html('▲');
        } else {
            span.addClass('isOpened').html('▼');
        }
        $(this).next().slideToggle("fast");
        $(".accordion-content").not($(this).next()).slideUp("fast");
    });
});

JSFIDDLE

- w3spi

Answer 4

如果你想使用font-awesome

jQuery(document).ready(function($) {
    $("#accordion").find(".accordion-toggle").click(function(){
        $(this).next().slideToggle("fast");
        if($(".fa").hasClass("fa-arrow-down")){$(".fa").removeClass("fa-arrow-down").addClass("fa-arrow-up");}
        else $(".fa").removeClass("fa-arrow-up").addClass("fa-arrow-down");
        
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">

<div id="accordion">
    <header class="accordion-toggle">
         <h2>Accordion Title <i class="fa fa-arrow-down"></i></h2>
    </header>
    <section class="entry accordion-content">
        <p>Accordion Content</p>
    </section>
</div>

- Amani Ben Azzouz

Answer 5

我停止使用手风琴，因为我的一些客户要求比较两个答案，但主要是因为使用简单的HTML5详细控件的效率，我在一个新客户的估计中为1000个问题测试！在单个FAQ页面中。手风琴的问题从140个项目开始，见https://github.com/twbs/bootstrap/issues/26419。

这里是最简单和高效的解决方案，具有完全的控制和自动“全部折叠”按钮的出现和消失。如果您想在实际网站上看到更高级的实现方式：https://airtempheating.com/faq

<details>
<summary>
  Is there any advantage to setting the thermostat fan setting to “On” or “Auto” mode all the time?</summary>
Yes! You will have constant filtering of the air. A second advantage is that the constant airflow will allow an even temperature throughout your home. 
However, if your home feels very humid, set the fan to the “Auto” mode.
</details>
<details>
<summary>
  How long does a typical furnace or air conditioner last?</summary>
New air conditioning and heating equipment lasts longer than ever! The end of a furnace's or air conditioner’s service life depends on more than just chronological age. 
Energy-efficiency issues and the price of any necessary repairs versus the cost of upgrading to a new unit all enter into that determination.
</details> <hr>    
<button type="button" id="hdn" class="btn btn-primary" onClick="window.location.reload();">Collapse All</button>

<style>
#hdn{display:none; visibility:visible}
</style>

<script>
$(function() {$('summary').click(function() {if($('#hdn').css("display") == "none"){$('#hdn').show();}});});
</script>

- Mr. Simplicity