堆栈内存溢出
  繁体   English   中英

单击手风琴项目时如何保留一个图标名称？

[英]How to keep one icon name while clicking accordion item?

 原文  2019-01-02 22:04:19  7   3    javascript/ jquery

问题描述

我正在尝试使用php wordpress使手风琴动态化。 但是我发现哪个来源的手风琴可以在html中正常工作。 但是，当我尝试使其动态时，字体真棒图标无法正常工作。 字体超赞图标在扩展时重复两次。 你可以看到下图

在此处输入图片说明

代码在这里https://jsfiddle.net/nriddhi/zyj3ck5t/

js代码： 

$(".accordion li h5").click(function () {
  var current_li = $(this).parent();
  $(".accordion li div").each(function(i,el) {          
    if($(el).parent().is(current_li)) {             
      $(el).prev().toggleClass("plus fa-minus");
      $(el).slideToggle();              
    } else{
      $(el).prev().removeClass("plus fa-minus");
      $(el).slideUp();
    }
  });
});
$('.accordion li > div').hide();
$('.accordion li h5').first().addClass("plus fa-minus");
$('.accordion li > div').first().show().addClass("plus");

我如何一次设置字体真棒图标类。 并且当它展开时，只会保留fa-减号图标，而当它关闭时，将会具有fa-plus的图标。 感谢帮助....

3 个解决方案

解决方案1
 2 已采纳  2019-01-02 22:34:52

在HTML中，您已经将fa-plus类应用于每个手风琴项目触发器。 然后，在您的JavaScript中，将plus fa-plus类重新应用于每个触发器，从而创建类重复项。

只需删除事件处理程序下方的其他js即可完成重复操作，并明确声明对每个单击的项目fa-plus plus fa-minus或plus fa-minus fa-plus将对更改进行处理。

现在，如果要使手风琴项目的每个声明触发图标100％动态，则必须提供一些其他代码来展示如何生成所述元素，但要在提供的信息范围内，这是适当的解决方法。 

 $(".accordion li h5").click(function () { var current_li = $(this).parent(); $(".accordion li div").each(function(i,el) { if($(el).parent().is(current_li)) { if ($(el).is(":visible")) { $(el).prev().toggleClass("plus fa-minus").toggleClass("fa-plus"); $(el).slideUp().removeClass("plus"); } else { $(el).prev().toggleClass("plus fa-minus").toggleClass("fa-plus"); $(el).slideDown().addClass("plus") } } else{ $(el).prev().removeClass("plus fa-minus").addClass("fa-plus"); $(el).slideUp(); } }); }); 
 @charset "UTF-8"; .accordion { max-width: 600px; margin: 50px auto; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 20px; } .accordion ul { border-bottom: #ecebe9 solid 1px; margin: 0; padding: 0; } .accordion ul li { border-left: #ecebe9 solid 1px; border-right: #ecebe9 solid 1px; list-style: none; margin: 0; } .accordion ul li h5 { font-size: 18px; color: #333333; font-weight: bold; background: #f7f6f5; border-top: #ecebe9 solid 1px; border-left: #ecebe9 solid 0px; border-right: #ecebe9 solid 0px; margin: 0; padding: 12px 15px 12px 50px; line-height: 19px; cursor: pointer; position: relative; } .accordion ul li h5.plus { border-bottom: #orange solid 1px; background: orange; color: #fff; } .accordion ul li > div { color: #333333; line-height: 24px; padding: 15px 15px 15px 50px; } .accordion ul li > div a { color: #7f0a19; } .accordion ul li h5.icon:before { font-family: 'FontAwesome'; background: #777; width: 20px; height: 20px; position: absolute; left: 14px; top: 14px; transition: all 0.3s ease-in-out 0s; -webkit-transition: all 0.3s ease-in-out 0s; -o-transition: all 0.3s ease-in-out 0s; font-size: 12px; color: #fff; text-align: center; line-height: 20px; } .accordion ul li h5.plus:before { font-family: 'FontAwesome'; } 
 <!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <title>Custom jQuery Accordion</title> <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css'> <link rel="stylesheet" href="css/style.css"> </head> <body> <div class="accordion"> <h2>Custom jQuery Accordion</h2> <ul> <li> <h5 class="icon plus fa-minus">Title Lorem Ipsum is simply dummy text of the Lorem</h5> <div class="plus">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the</div> </li> <li> <h5 class="icon fa-plus">Title Lorem Ipsum is simply text of the printing dummy </h5> <div style="display: none;">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the</div> </li> <li> <h5 class="icon fa-plus">Title Lorem Ipsum is dummy text of the printing</h5> <div style="display: none;">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the</div> </li> </ul> </div> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script> <script src="js/index.js"></script> </body> </html>

更新

@Chris Happy，感谢您指出解决方案中的错误。 我已经更正了CSS display属性中的错误，以及在手风琴项上切换的类。

解决方案2
 2  2019-01-02 22:40:04

为此，您需要：

  • 单击某个项目时切换.fa-plus类
  • 开始时删除.fa-plus类。

JS代码： 

$(".accordion li h5").click(function () {
  var current_li = $(this).parent();
  $(".accordion li div").each(function(i,el) {          
    if($(el).parent().is(current_li)) {             
      $(el).prev().toggleClass("fa-plus plus fa-minus"); // Toggle `fa-plus` as well
      $(el).slideToggle();              
    } else{
      $(el).prev().removeClass("plus fa-minus").addClass("fa-plus");
      $(el).slideUp();
    }
  });
});

$('.accordion li > div').hide();
$('.accordion li h5').first().addClass("plus fa-minus").removeClass("fa-plus"); // Remove `fa-plus`
$('.accordion li > div').first().show().addClass("plus");

片段： 

 $(".accordion li h5").click(function () { var current_li = $(this).parent(); $(".accordion li div").each(function(i,el) { if($(el).parent().is(current_li)) { $(el).prev().toggleClass("fa-plus plus fa-minus"); $(el).slideToggle(); } else{ $(el).prev().removeClass("plus fa-minus").addClass("fa-plus"); $(el).slideUp(); } }); }); $('.accordion li > div').hide(); $('.accordion li h5').first().addClass("plus fa-minus").removeClass("fa-plus"); $('.accordion li > div').first().show().addClass("plus"); 
 @charset "UTF-8"; .accordion { max-width: 600px; margin: 50px auto; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 20px; } .accordion ul { border-bottom: #ecebe9 solid 1px; margin: 0; padding: 0; } .accordion ul li { border-left: #ecebe9 solid 1px; border-right: #ecebe9 solid 1px; list-style: none; margin: 0; } .accordion ul li h5 { font-size: 18px; color: #333333; font-weight: bold; background: #f7f6f5; border-top: #ecebe9 solid 1px; border-left: #ecebe9 solid 0px; border-right: #ecebe9 solid 0px; margin: 0; padding: 12px 15px 12px 50px; line-height: 19px; cursor: pointer; position: relative; } .accordion ul li h5.plus { border-bottom: #orange solid 1px; background: orange; color: #fff; } .accordion ul li > div { color: #333333; line-height: 24px; padding: 15px 15px 15px 50px; } .accordion ul li > div a { color: #7f0a19; } .accordion ul li h5.icon:before { font-family: 'FontAwesome'; background: #777; width: 20px; height: 20px; position: absolute; left: 14px; top: 14px; transition: all 0.3s ease-in-out 0s; -webkit-transition: all 0.3s ease-in-out 0s; -o-transition: all 0.3s ease-in-out 0s; font-size: 12px; color: #fff; text-align: center; line-height: 20px; } .accordion ul li h5.plus:before { font-family: 'FontAwesome'; } 
 <!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <title>Custom jQuery Accordion</title> <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css'> <link rel="stylesheet" href="css/style.css"> </head> <body> <div class="accordion"> <h2>Custom jQuery Accordion</h2> <ul> <li> <h5 class="icon fa-plus">Title Lorem Ipsum is simply dummy text of the Lorem</h5> <div>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the</div> </li> <li> <h5 class="icon fa-plus">Title Lorem Ipsum is simply text of the printing dummy </h5> <div>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the</div> </li> <li> <h5 class="icon fa-plus">Title Lorem Ipsum is dummy text of the printing</h5> <div>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the</div> </li> </ul> </div> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script> <script src="js/index.js"></script> </body> </html>

JS小提琴

最后，建议您缓存$(el)或使用$this ： Jsfiddle ;

解决方案3
 1  2019-01-02 22:41:01

我认为我不完全理解您的问题，但是也许这就是您想要的： https : //jsfiddle.net/9p3mx52k/ 

$(".accordion li h5").click(function () {
  var current_li = $(this).parent();
  $(".accordion li").each(function(i,el) {          
    if($(el).is(current_li)) {
      if (current_li.find('> h5').hasClass('plus')) {
        $(el).find('> h5').removeClass("plus fa-minus").addClass("fa-plus");
        $(el).find('> div').removeClass('plus').slideUp();
      } else {
        $(el).find('> h5').removeClass("fa-plus").addClass("plus fa-minus");
        $(el).find('> div').addClass('plus').slideDown();
      }
    } else{
      $(el).find('> h5').removeClass("plus fa-minus").addClass("fa-plus");
      $(el).find('> div').removeClass('plus').slideUp();
    }
  });
});
$('.accordion li > div').hide();
$('.accordion li h5').first().removeClass("fa-plus").addClass("plus fa-minus");
$('.accordion li > div').first().show().addClass("plus");
  1. 您没有针对所有正确的元素。
  2. 根据所单击元素的状态（打开/关闭，请参见hasClass ），其行为是不同的，因此您不能简单地使用切换功能。

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 如何在 Bootstrap 5 中始终打开一个手风琴项目？ jQuery ui手风琴避免关闭项目wnen单击另一项 单击关闭图标后，如何删除具有相同类名的当前列表项 Accordion JS 代码：在单击另一个手风琴时隐藏任何打开的手风琴以及如何为每个手风琴添加 + 符号 保持第一个手风琴项目打开 单击手风琴元素时如何重定向到另一个div？ 手风琴关闭，除非单击图标 单击一个时如何折叠其他手风琴内容？ 单击列表中的第一项时打开手风琴 jQuery手风琴，单击一个已打开的手风琴项目即可对其进行切换
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM