打开和关闭兄弟姐妹时手风琴开关图像

Question

我有一个 accordion，在 HTML 中有一个加号图像和一个减号图像，这些图像是 toggled when the accordion is opened and closed。

目前，当您打开和关闭一个手风琴时，它会有效地切换其 plus/minus 图像并关闭所有打开的兄弟。

BUT here's the problem: the image on that sibling being closed will not toggle back to the plus image.

只是想知道是否有人有想法……谢谢！

$('.accordion').hide();

$('.heading').on('click', function(){
    $(this).next().slideToggle(400);
    $(this).next().siblings('.accordion').slideUp(400);
});


$('.heading2').on('click', function(){
    $(this).next().slideToggle(400);
    $(this).next().siblings('.accordion').slideUp(400);
});                 


$('#minus').hide();
$('#minus2').hide();


$('.heading').on('click', function(){
    "use strict";
    $('#plus').fadeToggle();
    $('#minus').fadeToggle();
});


$('.heading2').on('click', function(){
    "use strict";
    $('#plus2').fadeToggle();
    $('#minus2').fadeToggle();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="heading">
  <h4>LOREM IPSUM</h4>
  <img src="images/plus.png" width="20px" height="20px" alt="" id="plus"/>
  <img src="images/minus.png" width="20px" height="3px" alt="" id="minus"/>
</div>
<div class="accordion">
  <p>The standard chunk of Lorem Ipsum used since the 1500s is 
    reproduced below for those interested. Sections 1.10.32 and 1.10.33 
    from "de Finibus Bonorum et Malorum" by Cicero are also reproduced 
    in their exact original form, accompanied by English versions from 
    the 1914 translation by H. Rackham.</p>
</div>

<div class="heading2">
  <h4>LOREM IPSUM2</h4>
  <img src="images/plus.png" width="20px" height="20px" alt="" id="plus2"/>
  <img src="images/minus.png" width="20px" height="3px" alt="" id="minus2"/>
</div>
<div class="accordion">
  <p>All the Lorem Ipsum generators on the Internet tend to 
      repeat predefined chunks as necessary, making this the first 
      true generator on the Internet.</p>
</div>

Answer 1

当您关闭同级手风琴时，您必须隐藏另一个手风琴的减号并始终显示加号。请找到下面的代码段。

如果您可以使用 JQuery UI，则有一个内置的手风琴小部件：https://jqueryui.com/accordion/

$('.accordion').hide();

$('.heading').on('click', function(){
    $(this).next().slideToggle(400);
    $(this).next().siblings('.accordion').slideUp(400);
});


$('.heading2').on('click', function(){
    $(this).next().slideToggle(400);
    $(this).next().siblings('.accordion').slideUp(400);
});                 


$('#minus').hide();
$('#minus2').hide();


$('.heading').on('click', function(){
    "use strict";
    $('#plus').fadeToggle();
    $('#minus').fadeToggle();
    $('#plus2').fadeIn();
    $('#minus2').fadeOut();
});


$('.heading2').on('click', function(){
    "use strict";
    $('#plus2').fadeToggle();
    $('#minus2').fadeToggle();
    $('#plus').fadeIn();
    $('#minus').fadeOut();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="heading">
  <h4>LOREM IPSUM</h4>
  <img src="images/plus.png" alt="+" width="20px" height="20px" alt="" id="plus"/>
  <img src="images/minus.png" alt="-" width="20px" height="3px" alt="" id="minus"/>
</div>
<div class="accordion">
  <p>The standard chunk of Lorem Ipsum used since the 1500s is 
    reproduced below for those interested. Sections 1.10.32 and 1.10.33 
    from "de Finibus Bonorum et Malorum" by Cicero are also reproduced 
    in their exact original form, accompanied by English versions from 
    the 1914 translation by H. Rackham.</p>
</div>

<div class="heading2">
  <h4>LOREM IPSUM2</h4>
  <img src="images/plus.png" alt="+" width="20px" height="20px" alt="" id="plus2"/>
  <img src="images/minus.png" alt="-" width="20px" height="3px" alt="" id="minus2"/>
</div>
<div class="accordion">
  <p>All the Lorem Ipsum generators on the Internet tend to 
      repeat predefined chunks as necessary, making this the first 
      true generator on the Internet.</p>
</div>

打开和关闭兄弟姐妹时手风琴开关图像

Accordion switch images on open and close of siblings

jquery

accordion

toggle