javascript - Jquery/CSS Accordion

Question

当您关闭面板时，我有以下代码与图标分开工作。当面板关闭时它应该是一个十字，当面板展开并显示在屏幕上时它应该是一个减号。

我被告知我不能更改 HTML 但是我可以更改 CSS 和/或 Jquery。有人可以帮我处理图标吗？我只需要弄清楚当您将其最小化时图标会变为加号。

$(document).ready(function($) {

  $('.accordioncollapse').hide(); //added

  $(".accordion-heading").click(function() {

  $(this).find('.accordion-toggle').addClass('collapsed'); //added

  $(this).parent().addClass('active').find('.panel2').slideToggle('fast');
  $(".accordion-heading").not(this).parent().removeClass('active').find('.panel2').slideUp('fast');

  $(".accordion-heading").not(this).find('.accordion-toggle').removeClass('collapsed'); //added
  
  });	
  
});

.panel1 {
  width: 60%;
  margin-left: 20px;
}

.accordion-default {
  border-bottom: 1px solid #C8C8C8;
}

.accordion-heading>a {
  display: block;
  line-height: 1.875;
  font-size: 16px;
  font-style: normal;
  font-family: sans-serif;
  font-weight: bold;
  text-decoration: none;
  color: black;
  padding-top: 18px;
  padding-bottom: 18px;
}

.accordion-heading>a:hover,
.accordion-heading>a:active,
.accordion-heading>a:focus {
  text-decoration: none;
  color: #D0006F;
}

.accordion-body {
  margin-left: 2px;
  padding-top: 5px;
  padding-bottom: 10px;
}

.accordion-toggle {
  padding-left: 2px;
  position: relative;
  cursor: pointer;
  text-align: left;
}

.accordion-toggle::before,
.accordion-toggle::after {
  right: 5px;
  content: '';
  display: block;
  position: absolute;
  top: 50%;
  width: 24px;
  height: 2px;
  margin-top: -2px;
  background-color: #D0006F;
  -webkit-transform-origin: 50% 50%;
  -ms-transform-origin: 50% 50%;
  transform-origin: 50% 50%;
  -webkit-transition: all 0.25s;
  transition: all 0.25s;
}

.accordion-toggle::before {
  -webkit-transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
  transform: rotate(-90deg);
  opacity: 1;
}

.accordion-toggle.collapsed::before {
  -webkit-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  transform: rotate(0deg);
  opacity: 1;
  text-decoration: none;
}

.accordion-toggle.collapsed::after {
  -webkit-transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
  transform: rotate(-90deg);
  text-decoration: none;
  opacity: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<div class="panel1" id="accordion">
  <div class="accordion-default">
    <div class="accordion-heading">​
      <a class="accordion-toggle " aria-expanded="false" href="#collapseOne" data-parent="#accordion" data-toggle="collapse">Heading1</a> </div>
    <div class="panel2 accordioncollapse collapse" id="collapseOne" aria-expanded="false">
      <div class="accordion-body"> Collapsible Content #1 </div>
    </div>
  </div>
  <div class="accordion-default">
    <div class="accordion-heading">
      <a class="accordion-toggle" aria-expanded="false" href="#collapseTwo" data-parent="#accordion" data-toggle="collapse">Heading2</a> </div>
    <div class="panel2 accordioncollapse collapse" id="collapseTwo" aria-expanded="false">
      <div class="accordion-body"> Collapsible Content #2 </div>
    </div>
  </div>
  <div class="accordion-default">
    <div class="accordion-heading">
      <a class="accordion-toggle" aria-expanded="false" href="#collapseThree" data-parent="#accordion" data-toggle="collapse">Heading3</a> </div>
    <div class="panel2 accordioncollapse collapse" id="collapseThree" aria-expanded="false">
      <div class="accordion-body"> Collapsible Content #3 </div>
    </div>
  </div>
</div>

目前我们需要保留的有效代码是:一次只打开一个面板提前致谢，克莱尔

Answer 1

我认为您只需要将 addClass 更改为 toggleClass - 试试下面的代码片段:

$(document).ready(function($) {

  $('.accordioncollapse').hide(); //added

  $(".accordion-heading").click(function() {

  $(this).find('.accordion-toggle').toggleClass('collapsed'); //added

  $(this).parent().addClass('active').find('.panel2').slideToggle('fast');
  $(".accordion-heading").not(this).parent().removeClass('active').find('.panel2').slideUp('fast');

  $(".accordion-heading").not(this).find('.accordion-toggle').removeClass('collapsed'); //added
  
  });	
  
});

.panel1 {
  width: 60%;
  margin-left: 20px;
}

.accordion-default {
  border-bottom: 1px solid #C8C8C8;
}

.accordion-heading>a {
  display: block;
  line-height: 1.875;
  font-size: 16px;
  font-style: normal;
  font-family: sans-serif;
  font-weight: bold;
  text-decoration: none;
  color: black;
  padding-top: 18px;
  padding-bottom: 18px;
}

.accordion-heading>a:hover,
.accordion-heading>a:active,
.accordion-heading>a:focus {
  text-decoration: none;
  color: #D0006F;
}

.accordion-body {
  margin-left: 2px;
  padding-top: 5px;
  padding-bottom: 10px;
}

.accordion-toggle {
  padding-left: 2px;
  position: relative;
  cursor: pointer;
  text-align: left;
}

.accordion-toggle::before,
.accordion-toggle::after {
  right: 5px;
  content: '';
  display: block;
  position: absolute;
  top: 50%;
  width: 24px;
  height: 2px;
  margin-top: -2px;
  background-color: #D0006F;
  -webkit-transform-origin: 50% 50%;
  -ms-transform-origin: 50% 50%;
  transform-origin: 50% 50%;
  -webkit-transition: all 0.25s;
  transition: all 0.25s;
}

.accordion-toggle::before {
  -webkit-transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
  transform: rotate(-90deg);
  opacity: 1;
}

.accordion-toggle.collapsed::before {
  -webkit-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  transform: rotate(0deg);
  opacity: 1;
  text-decoration: none;
}

.accordion-toggle.collapsed::after {
  -webkit-transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
  transform: rotate(-90deg);
  text-decoration: none;
  opacity: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<div class="panel1" id="accordion">
  <div class="accordion-default">
    <div class="accordion-heading">​
      <a class="accordion-toggle " aria-expanded="false" href="#collapseOne" data-parent="#accordion" data-toggle="collapse">Heading1</a> </div>
    <div class="panel2 accordioncollapse collapse" id="collapseOne" aria-expanded="false">
      <div class="accordion-body"> Collapsible Content #1 </div>
    </div>
  </div>
  <div class="accordion-default">
    <div class="accordion-heading">
      <a class="accordion-toggle" aria-expanded="false" href="#collapseTwo" data-parent="#accordion" data-toggle="collapse">Heading2</a> </div>
    <div class="panel2 accordioncollapse collapse" id="collapseTwo" aria-expanded="false">
      <div class="accordion-body"> Collapsible Content #2 </div>
    </div>
  </div>
  <div class="accordion-default">
    <div class="accordion-heading">
      <a class="accordion-toggle" aria-expanded="false" href="#collapseThree" data-parent="#accordion" data-toggle="collapse">Heading3</a> </div>
    <div class="panel2 accordioncollapse collapse" id="collapseThree" aria-expanded="false">
      <div class="accordion-body"> Collapsible Content #3 </div>
    </div>
  </div>
</div>