accordion-toggles - Jquery活跃？

时间：2018-03-07 10:19:10

标签： jquery html css

我在SharePoint 2010中使用可重用内容创建了一个手风琴，除了手风琴切换之外，所有手风琴都运行良好。我想我知道为什么我不知道足够的编码能够修复它。我需要（我认为）为所有不活动的面板添加一个新功能并加上加号。我有以下代码，每次手风琴面板打开时我的手风琴转换旋转w（或应该）并关闭。当面板处于活动状态时，它应该是一个加号，当它不活动时，它应该是一个减号，它应该在两者之间平滑过渡。 如果有人可以帮助我，我附上了我的所有代码吗？

＆＃13;
＆＃13; 
$(document).ready(function($) {

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



  });

});
＆＃13; 
.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: 0;
}

.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;
}
＆＃13; 
<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" aria-expanded="false" href="#collapseOne" data-parent="#accordion" data-toggle="collapse">Heading1</a> </div>
    <div class="panel2 accordioncollapse collapse" id="collapseOne" aria-expanded="false" style="height: 0px;">
      <div class="accordion-body"> Collapsible Content #1 </div>
    </div>
  </div>
  <div class="accordion-default">
    <div class="accordion-heading">
      <a class="accordion-toggle collapsed" aria-expanded="false" href="#collapseTwo" data-parent="#accordion" data-toggle="collapse">Heading2</a> </div>
    <div class="panel2 accordioncollapse collapse" id="collapseTwo" aria-expanded="false" style="height: 0px;">
      <div class="accordion-body"> Collapsible Content #2 </div>
    </div>
  </div>
  <div class="accordion-default">
    <div class="accordion-heading">
      <a class="accordion-toggle collapsed" aria-expanded="false" href="#collapseThree" data-parent="#accordion" data-toggle="collapse">Heading3</a> </div>
    <div class="panel2 accordioncollapse collapse" id="collapseThree" aria-expanded="false" style="height: 0px;">
      <div class="accordion-body"> Collapsible Content #3 </div>
    </div>
  </div>
</div>
＆＃13;
＆＃13;
＆＃13;

2 个答案:

答案 0 :(得分：1)

请你试试下面的代码

＆＃13;
＆＃13; 
$(document).ready(function($) {
$( ".accordion-heading").on('click', function (e) {
    $return = true;
    $( "#accordion .panel2").slideUp();
    $(".accordion-heading").removeClass('active');
    if($(this).next('div').is(':visible')== false)
    {
        $return = false;
        $(this).addClass('active');
        $(this).next('div').stop(true,false).slideDown();
    }
    else
    {
        $("#accordion  .accordion-heading").removeClass('active');
        $(this).removeClass('active');
    }
    return $return;
});
});
＆＃13; 
.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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：0)

只需在js中更新以下代码，然后从panel2 div中删除内联样式，并从包含类collapsed

的a标记中删除.accordion-toggle类

＆＃13;
＆＃13; 
$(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
  
  });	
  
});
＆＃13; 
.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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题