Question

我要做的就是关闭活动面板，但它不会这样做，我可以看到它与我的jQuery有关。它完美地工作，除了能够关闭活动的功能。

目前它能够一次只打开一个面板，所以我想保持原样。我确定这很简单！

.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-heading.active .accordion-toggle.collapsed::before{
  opacity: 0;
}
.accordion-heading.active .accordion-toggle.collapsed::after {

  transform: rotate(-180deg);
}
.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: 0;
}
.panel2 {
  display: none;
}
.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;
}

<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 collapsed" >Heading1</a> </div>
    <div class="panel2 accordioncollapse collapse" ">
      <div class="accordion-body"> Collapsible Content #1 </div>
    </div>
  </div>
  <div class="accordion-default">
    <div class="accordion-heading">
      <a class="accordion-toggle collapsed"  >Heading2</a> </div>
    <div class="panel2 accordioncollapse collapse" >
      <div class="accordion-body"> Collapsible Content #2 </div>
    </div>
  </div>
  <div class="accordion-default">
    <div class="accordion-heading">
      <a class="accordion-toggle collapsed"  >Heading3</a> </div>
    <div class="panel2 accordioncollapse collapse" id="collapseThree" >
      <div class="accordion-body"> Collapsible Content #3 </div>
    </div>
  </div>
</div>

Sql("INSERT INTO Videos (Name, Url, VideoGenreId, ArtistId) VALUES ('SomeName', 'http://www.someurl.com', 1, 1)");

Answer 1

您应该检查当前面板是否具有active类。如果有，则只需切换它并关闭面板。否则做你做的。

检查此示例：

$(document).ready(function($) {
   $("#expand").change(function() {
       if (this.checked) {
           $("#accordion  .accordion-heading").addClass('active locked');
           $('.panel2').slideDown();
       } else {
           $("#accordion  .accordion-heading").removeClass('active locked');
           $('.panel2').slideUp();
       }
   });
   $("#accordion").on('click','.accordion-heading', function (e) {
      if (!$("#expand").prop("checked")) {
          if ($(this).hasClass('active')) {
              $(this).next('div').slideUp();
              $(this).removeClass('active');
          } else {
              $("#accordion .panel2").slideUp();
              $("#accordion  .accordion-heading").removeClass('active');
              $(this).next('div').stop(true,false).slideDown();
              $(this).addClass('active');
          }
      }
   });
});

.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-heading.active .accordion-toggle.collapsed::before{
  opacity: 0;
}
.accordion-heading.active .accordion-toggle.collapsed::after {

  transform: rotate(-180deg);
}
.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: 0;
}
.panel2 {
  display: none;
}
.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;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<input id="expand" type="checkbox">Expand all
<div class="panel1" id="accordion">
  <div class="accordion-default">
    <div class="accordion-heading">
      <a class="accordion-toggle collapsed" >Heading1</a> </div>
    <div class="panel2 accordioncollapse collapse">
      <div class="accordion-body"> Collapsible Content #1 </div>
    </div>
  </div>
  <div class="accordion-default">
    <div class="accordion-heading">
      <a class="accordion-toggle collapsed"  >Heading2</a> </div>
    <div class="panel2 accordioncollapse collapse" >
      <div class="accordion-body"> Collapsible Content #2 </div>
    </div>
  </div>
  <div class="accordion-default">
    <div class="accordion-heading">
      <a class="accordion-toggle collapsed"  >Heading3</a> </div>
    <div class="panel2 accordioncollapse collapse" id="collapseThree" >
      <div class="accordion-body"> Collapsible Content #3 </div>
    </div>
  </div>
</div>

如何在jQuery手风琴中关闭活动面板？

1 个答案: