jquery - 切换图标不改变 html css jquery

Question

Accordion 图标未随此代码更改..

$('.toggle-title').click(function(){
      $(this).next('div').siblings('div').slideUp('slow');
      $(this).next('.toggle-details').slideToggle( "slow" );
});

.toggle-item {margin-bottom: 20px;border-radius: 3px;}
.toggle-item .toggle-title {position: relative;cursor: pointer;background: #f2f0f0;border-radius: 3px;padding: 21px;border: 1px solid #e9d07b;border-collapse: collapse;margin-bottom: 20px;}
.toggle-item .toggle-title h2 {margin:0;font-family: 'AvenirLTStd-Book';font-size: 24px;color:#494949;max-width: 90%;}
.toggle-item .toggle-title:before{content: '\f101';font-family: 'FontAwesome';position: absolute;right: 50px;top: 18px;color:#237c62;font-size: 22px;font-weight: 900;}
.toggle-item .toggle-title.clicked:before{content: '\f103';font-family: 'FontAwesome';position: absolute;right: 50px;top: 18px;color:#237c62;}
.toggle-item .toggle-details {display: none;background: transparent;padding: 21px;margin-top: 20px;border-top: 1px solid #e3e3e3;}
.toggle-item .toggle-details p {font-family: 'AvenirLTStd-Book';color: #797979;font-size: 18px;font-weight: 600;line-height: 1.5;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="toggle-item">
     <section class="toggle-title">
       <h2>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</h2>
     </section>
     <div class="toggle-details">
         <p>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 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. </p>
    </div>
<section class="toggle-title">
       <h2>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</h2>
     </section>
     <div class="toggle-details">
         <p>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 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. </p>
    </div>
</div>

Answer 1

样式:

.toggle-item .toggle-title:before{content: '\25B6';font-family: 'FontAwesome';position: absolute;right: 50px;top: 18px;color:#237c62;font-size: 22px;font-weight: 900;}

.toggle-item .toggle-title.clicked:before{content: '\25BD';font-family: 'FontAwesome';position: absolute;right: 50px;top: 18px;color:#237c62;font-size: 22px;font-weight: 900;}

Jquery:

$(document).ready(function(){
  $('.toggle-title').click(function(){
      $('.toggle-title').not(this).removeClass('clicked'); <-----Added
      $(this).toggleClass('clicked');<-----------------------------Added
      $(this).next('div').siblings('div').slideUp('slow');
      $(this).next('.toggle-details').slideToggle( "slow" );
  });
});

$(document).ready(function(){
  $('.toggle-title').click(function(){
      $('.toggle-title').not(this).removeClass('clicked');
      $(this).toggleClass('clicked');
      $(this).next('div').siblings('div').slideUp('slow');
      $(this).next('.toggle-details').slideToggle( "slow" );
  });
});

.toggle-item {margin-bottom: 20px;border-radius: 3px;}
.toggle-item .toggle-title {position: relative;cursor: pointer;background: #f2f0f0;border-radius: 3px;padding: 21px;border: 1px solid #e9d07b;border-collapse: collapse;margin-bottom: 20px;}
.toggle-item .toggle-title h2 {margin:0;font-family: 'AvenirLTStd-Book';font-size: 24px;color:#494949;max-width: 90%;}
.toggle-item .toggle-details {display: none;background: transparent;padding: 21px;margin-top: 20px;border-top: 1px solid #e3e3e3;}
.toggle-item .toggle-details p {font-family: 'AvenirLTStd-Book';color: #797979;font-size: 18px;font-weight: 600;line-height: 1.5;}

.toggle-item .toggle-title:before{content: '\25B6';font-family: 'FontAwesome';position: absolute;right: 50px;top: 18px;color:#237c62;font-size: 22px;font-weight: 900;}

.toggle-item .toggle-title.clicked:before{content: '\25BD';font-family: 'FontAwesome';position: absolute;right: 50px;top: 18px;color:#237c62;font-size: 22px;font-weight: 900;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="toggle-item">
     <section class="toggle-title">
       <h2>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</h2>
     </section>
     <div class="toggle-details">
         <p>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 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. </p>
    </div>
<section class="toggle-title">
       <h2>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</h2>
     </section>
     <div class="toggle-details">
         <p>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 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. </p>
    </div>
</div>