Question

我正在尝试使用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的图标。感谢您的帮助。...

Answer 1

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

只需删除事件处理程序下方的其他js即可完成重复操作，并明确声明对每个单击的项添加/删除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属性中的错误，以及在手风琴项目上切换类的错误。

Answer 2

要使其正常工作，您需要：

点击某项时切换.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>

JSfiddle

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

Answer 3

我认为我不完全理解您的问题，但这也许就是您想要的：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");

您没有针对所有正确的元素。
行为取决于所单击元素的状态（打开/关闭，请参见hasClass），因此您不能简单地使用切换功能。

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

3 个答案: