手风琴开关图像打开和关闭兄弟姐妹 [英] Accordion switch images on open and close of siblings

查看：33
本文介绍了手风琴开关图像打开和关闭兄弟姐妹的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我有一个 accordion，在 HTML 中带有一个加号和减号图像，这些图像将在打开和关闭手风琴时 切换代码>.

目前，当您打开和关闭一个手风琴时，它会有效地切换其正/负图像并关闭所有打开的手风琴.

<块引用>

但问题是:关闭的兄弟姐妹上的图像不会切换回加号图像.

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

$('.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(){严格使用"；$('#plus').fadeToggle();$('#minus').fadeToggle();});$('.heading2').on('click', function(){严格使用"；$('#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 class="accordion"><p>自 1500 年代以来使用的 Lorem Ipsum 的标准块是下面转载给有兴趣的人.第 1.10.32 和 1.10.33 节西塞罗的de Finibus Bonorum et Malorum"也被转载以它们的原始形式，并附有英文版本1914 年 H. Rackham 的翻译.

<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 class="accordion"><p>网上所有的Lorem Ipsum生成器都倾向于根据需要重复预定义的块，使其成为第一个互联网上真正的生成器.

解决方案

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

如果您可以使用 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(){严格使用"；$('#plus').fadeToggle();$('#minus').fadeToggle();$('#plus2').fadeIn();$('#minus2').fadeOut();});$('.heading2').on('click', function(){严格使用"；$('#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 class="accordion"><p>自 1500 年代以来使用的 Lorem Ipsum 的标准块是下面转载给有兴趣的人.第 1.10.32 和 1.10.33 节西塞罗的de Finibus Bonorum et Malorum"也被转载以它们的原始形式，并附有英文版本1914 年 H. Rackham 的翻译.

<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 class="accordion"><p>网上所有的Lorem Ipsum生成器都倾向于根据需要重复预定义的块，使其成为第一个互联网上真正的生成器.

I have an accordion with a plus image and minus image in the HTML and these images are to be toggled when the accordion is opened and closed.

At present when you open and close one accordion it is effectively toggling its plus/minus images and closing any open siblings.

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

Just wondering if anyone had an idea… thanks!

$('.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>

解决方案

When you close the sibling accordion, you have to hide the other accordion's minus and always show the plus. Please find the snippet below.

If you can use JQuery UI, there is a built in accordion widget: 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>

这篇关于手风琴开关图像打开和关闭兄弟姐妹的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
其他开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆