jquery手风琴 - onclick打开所有手风琴

时间：2017-01-24 06:23:42

标签： javascript jquery html css

我已经创建了一个自定义的jquery手风琴，当我点击手风琴标题时，我开始使用手风琴标题，它打开了我应该打开我所点击的手风琴，下面是代码：

＆＃13;
＆＃13; 
$(document).ready(function() {
    $(".acc-wrap > .acc-head").on("click", function() {
        if ($(this).hasClass('active')) {
            $(this).removeClass("active");
            $(this).siblings('.acc-body').slideUp(200);
            $(".acc-wrap > .acc-head").attr('class', 'acc-head opened');
        } else {
            $(".acc-wrap > .acc-head").attr('class', 'acc-head closed');
            $(this).addClass("active");
            $('.acc-body').slideUp(200);
            $(this).siblings('.acc-body').slideDown(200);
        }
    });
});
＆＃13; 
.projects-list {
  max-width: 600px;
  margin: 0 auto;
  background: #E0E0E0;
  padding: 15px 0;
  font-family: Roboto;
}
body {
  margin: 0;
  padding: 0;
}
.acc-wrap {
  position: relative;
  width: 100%;
}
.acc-wrap > .acc-head {
  float: left;
  width: 100%;
  display: block;
  background-color: #264796;
  padding: 10px;
  color: #fff;
  font-weight: 600;
  border-bottom: 1px solid #ddd;
  transition: all 0.2s linear;
  position: relative;
}
.acc-wrap > .acc-head.opened {
  position: relative;
}
.acc-wrap > .acc-head.opened:after {
  content: "\f055";
  font-family: fontAwesome;
  position: absolute;
  right: 15px;
}
.acc-wrap > .acc-head.closed {
  position: relative;
}
.acc-wrap > .acc-head.closed:after {
  content: "\f056";
  font-family: fontAwesome;
  position: absolute;
  right: 15px;
}
.acc-body {
  position: relative;
  width: 100%;
  float: left;
  background-color: #fff;
  padding: 10px;
  border-bottom: 1px solid #ddd;
  display: none;
  box-sizing: border-box;
}
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">
<div class="projects-list">
  <div class="acc-wrap">
    <div class="acc-head opened"> Vestibulum </div>
    <div class="acc-body"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna. </div>
    <div class="acc-head"> Vestibulum  2</div>
    <div class="acc-body"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna. </div>
  </div>
</div>
＆＃13;
＆＃13;
＆＃13;

6 个答案:

答案 0 :(得分：5)

我认为你应该使用next-function而不是siblings-function：

https://api.jquery.com/next/

＆＃13;
＆＃13; 
<style>
    .projects-list {
      max-width: 600px;
      margin: 0 auto;
      background: #E0E0E0;
      padding: 15px 0;
      font-family: Roboto;
    }
    body {
      margin: 0;
      padding: 0;
    }
    .acc-wrap {
      position: relative;
      width: 100%;
    }
    .acc-wrap > .acc-head {
      float: left;
      width: 100%;
      display: block;
      background-color: #264796;
      padding: 10px;
      color: #fff;
      font-weight: 600;
      border-bottom: 1px solid #ddd;
      transition: all 0.2s linear;
      position: relative;
    }
    .acc-wrap > .acc-head.opened {
      position: relative;
    }
    .acc-wrap > .acc-head.opened:after {
      content: "\f055";
      font-family: fontAwesome;
      position: absolute;
      right: 15px;
    }
    .acc-wrap > .acc-head.closed {
      position: relative;
    }
    .acc-wrap > .acc-head.closed:after {
      content: "\f056";
      font-family: fontAwesome;
      position: absolute;
      right: 15px;
    }
    .acc-body {
      position: relative;
      width: 100%;
      float: left;
      background-color: #fff;
      padding: 10px;
      border-bottom: 1px solid #ddd;
      display: none;
      box-sizing: border-box;
    }
</style>
＆＃13;
＆＃13;
＆＃13;

`

答案 1 :(得分：1)

您可以尝试这样的事情：

$(this)
  // Add/ Remove active and opened as both will always be together.
  .toggleClass('active opened')
  // Add closed if active not present else remove it
  .toggleClass('closed', !$this.hasClass('active'))
  // Go to next element
  .next()
  // Toggle slide on every click
  .slideToggle(200)

另请注意，$(".acc-wrap > .acc-head");指向所有手风琴标题。您应该始终尝试使用this并导航到必要的div。

示例

＆＃13;
＆＃13; 
$(document).ready(function() {
  $(".acc-wrap > .acc-head").on("click", function() {
    var $this = $(this)
    $this
      .toggleClass('active opened')
      .toggleClass('closed', !$this.hasClass('active'))
      .next()
      .slideToggle(200)
  });
});
＆＃13; 
.projects-list {
  max-width: 600px;
  margin: 0 auto;
  background: #E0E0E0;
  padding: 15px 0;
  font-family: Roboto;
}
body {
  margin: 0;
  padding: 0;
}
.acc-wrap {
  position: relative;
  width: 100%;
}
.acc-wrap > .acc-head {
  float: left;
  width: 100%;
  display: block;
  background-color: #264796;
  padding: 10px;
  color: #fff;
  font-weight: 600;
  border-bottom: 1px solid #ddd;
  transition: all 0.2s linear;
  position: relative;
}
.acc-wrap > .acc-head.opened {
  position: relative;
}
.acc-wrap > .acc-head.opened:after {
  content: "\f055";
  font-family: fontAwesome;
  position: absolute;
  right: 15px;
}
.acc-wrap > .acc-head.closed {
  position: relative;
}
.acc-wrap > .acc-head.closed:after {
  content: "\f056";
  font-family: fontAwesome;
  position: absolute;
  right: 15px;
}
.acc-body {
  position: relative;
  width: 100%;
  float: left;
  background-color: #fff;
  padding: 10px;
  border-bottom: 1px solid #ddd;
  display: none;
  box-sizing: border-box;
}
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">

<div class="projects-list">
  <div class="acc-wrap">
    <div class="acc-head">Vestibulum</div>
    <div class="acc-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna.</div>
    <div class="acc-head">Vestibulum 2</div>
    <div class="acc-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna.</div>
  </div>
</div>
＆＃13;
＆＃13;
＆＃13;

答案 2 :(得分：0)

添加它比你的http://www.w3schools.com/Bootstrap/tryit.asp?filename=trybs_collapsible_accordion&stacked=h

更容易和快速

答案 3 :(得分：0)

$(".acc-wrap > .acc-head:not(.opened)");

答案 4 :(得分：0)

不要使用类引用元素，而是使用“this”.find（“element”）。attr（）等等。使用此$时，您将定位与类.acc-head匹配的所有元素（“ .acc-wrap＆gt; .acc-head“）;

或者，您可以使用$（“。acc-wrap＆gt; .acc-head.active”）引用目标元素;

答案 5 :(得分：0)

<div style="max-width: 300px;">
<div class="panel panel-default">
    <div class="panel-heading" style="background-color:#264796;color:#ffffff">
        <h4 class="panel-title" id="ab">
            <a data-toggle="collapse" data-parent="#accordion" href="#collapse6dec" >Vestibulum
            &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp;&nbsp;<span id="plus"><i class="fa fa-plus-circle" aria-hidden="true"></i></span> <span id="minus"  style="display:none"><i class="fa fa-minus-circle" aria-hidden="true"></i></span> </a>
        </h4>
    </div>
    <div id="collapse6dec" class="panel-collapse collapse">
        <div class="panel-body" style="">
            <div class="row">
                <p class="panel-title" style="font-size: 18px;"> <a data-toggle="collapse" data-parent="#accordion" >Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna. </a></p>
            </div>
        </div>
    </div>
</div>
<div class="panel panel-default" style="margin-top:-20px">
    <div class="panel-heading" style="background-color:#264796;color:#ffffff">
        <h4 class="panel-title" id="ab1">
            <a data-toggle="collapse" data-parent="#accordion" href="#lorem2" >Vestibulum 2  &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp;<span id="plus1"><i class="fa fa-plus-circle" aria-hidden="true"></i></span> <span id="minus1"  style="display:none"><i class="fa fa-minus-circle" aria-hidden="true"></i></span></a>
        </h4>
    </div>
    <div id="lorem2" class="panel-collapse collapse">
        <div class="panel-body">
            <div class="row">
                <p class="panel-title" style="font-size: 18px;"> <a data-toggle="collapse" data-parent="#accordion" >Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna. </a></p>
            </div>
        </div>
    </div>
</div>


<script type="text/javascript">
      var counter = -1;
         $("#ab").click(function(){
             counter++;
            if (counter % 2 === 0) {
                 $("#plus").css('display','none');
                 $("#minus").css('display','inline');
            }
           else{
                $("#plus").css('display','inline');
                $("#minus").css('display','none');
            }

        });
          $("#ab1").click(function(){
             counter++;
            if (counter % 2 === 0) {
                 $("#plus1").css('display','none');
                 $("#minus1").css('display','inline');
            }
           else{
                $("#plus1").css('display','inline');
                $("#minus1").css('display','none');
            }

        });
    </script>
相关问题
最新问题