个性化响应的jQuery手风琴

时间：2017-07-14 22:38:47

标签： jquery css accordion

当我尝试复制多个下拉列表的手风琴时，它会打开所有并关闭所有，而不是单独关闭。我试图将第二个重命名为accordion2，它会打开，但不会关闭。第三个根本不起作用。我很新，只是不知道该怎么做才能使它工作，所以我可以有三架独立工作的手风琴。请帮忙！谢谢。

<!--ACCORDION-->
        <h1 id="homeTitles">Cory Delancey</h1>
        <div class="accordion">
    <div class="accordion-section">
        <a class="accordion-section-title" href="#accordion-1">Cory Delancey</a>

        <div id="accordion-1" class="accordion-section-content">
            <img class="guidesImg" src="images/campingRV.jpg">
            <p><strong>Certification: </strong>4L</p>
            <p><strong>Years of Experience: </strong>9</p>
            <p><strong>Email: </strong>cory@sra.com</p>
            <p><strong>Biography: </strong>Cory grew up in New York City, but each summer his family left the city to spend time backpacking and whitewater rafting. He came to Idaho for college and never left the state. He spends his summers as a guide on the rivers he loves.</p>
        </div><!--end .accordion-section-content-->
    </div><!--end .accordion-section-->
</div><!--end .accordion-->

</main>


/* GUIDES ACCORDION 1 */
.accordion, .accordion * {
    -webkit-box-sizing:border-box; 
    -moz-box-sizing:border-box; 
    box-sizing:border-box; }

.accordion {
    overflow:hidden;
    box-shadow:0px 1px 3px rgba(0,0,0,0.25);
    border-radius:3px;
    background:#f7f7f7; }

/* ACCORDION titles */
.accordion-section-title {
    width:100%;
    padding:15px;
    display:inline-block;
    border-bottom:1px solid #1a1a1a;
    background:#619efc;
    transition:all linear 0.15s;
    /* Type */
    font-size:1.200em;
    text-shadow:0px 1px 0px #1a1a1a;
    color:#fff; }

.accordion-section-title.active, .accordion-section-title:hover {
    background:#4c4c4c; text-decoration:none; }

.accordion-section:last-child .accordion-section-title {
    border-bottom:none; }

/* ACCORDION Content */
.accordion-section-content { padding:15px; display:none; }

/* ACCORDION Images */
.guidesImg{  float: left; margin: 10px 10px 10px 10px; }


/*GUIDES PAGES*/

$(document).ready(function() {
    function close_accordion_section() {
        $('.accordion .accordion-section-title').removeClass('active');
        $('.accordion .accordion-section-content').slideUp(300).removeClass('open');
    }

    $('.accordion-section-title').click(function(e) {
        // Grab current anchor value
        var currentAttrValue = $(this).attr('href');

        if($(e.target).is('.active')) {
            close_accordion_section();
        }else {
            close_accordion_section();

            // Add active class to section title
            $(this).addClass('active');
            // Open up the hidden content panel
            $('.accordion ' + currentAttrValue).slideDown(300).addClass('open'); 
        }

        e.preventDefault();
    });
});

1 个答案:

答案 0 :(得分：0)

更新close_accordion_section()以通过接受变量关闭特定面板，然后在调用该函数时将已单击的特定标题部分（或所有未单击的部分）作为变量传递，并引用相对于您单击以关闭面板的标题定位的元素。

$(document).ready(function() {
  function close_accordion_section($el) {
    $el.removeClass("active");
    $el.next(".accordion-section-content").slideUp(300).removeClass("open");
  }
  
  var $titles = $(".accordion-section-title");

  $titles.on('click',function(e) {
    // Grab current anchor value
    var currentAttrValue = $(this).attr("href");

    if ($(e.target).is(".active")) {
      close_accordion_section($(this));
    } else {
      close_accordion_section($titles.not($(this)));
      // Add active class to section title
      $(this).addClass("active");
      // Open up the hidden content panel
      $(".accordion " + currentAttrValue).slideDown(300).addClass("open");
    }

    e.preventDefault();
  });
});
/* GUIDES ACCORDION 1 */
.accordion, .accordion * {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.accordion {
  overflow: hidden;
  box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.25);
  border-radius: 3px;
  background: #f7f7f7;
}

/* ACCORDION titles */
.accordion-section-title {
  width: 100%;
  padding: 15px;
  display: inline-block;
  border-bottom: 1px solid #1a1a1a;
  background: #619efc;
  transition: all linear 0.15s;
  /* Type */
  font-size: 1.200em;
  text-shadow: 0px 1px 0px #1a1a1a;
  color: #fff;
}

.accordion-section-title.active, .accordion-section-title:hover {
  background: #4c4c4c;
  text-decoration: none;
}

.accordion-section:last-child .accordion-section-title {
  border-bottom: none;
}

/* ACCORDION Content */
.accordion-section-content {
  padding: 15px;
  display: none;
}

/* ACCORDION Images */
.guidesImg {
  float: left;
  margin: 10px 10px 10px 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<!--ACCORDION-->
<h1 id="homeTitles">Cory Delancey</h1>
<div class="accordion">

  <div class="accordion-section">
    <a class="accordion-section-title" href="#accordion-1">Cory Delancey</a>

    <div id="accordion-1" class="accordion-section-content">
      <img class="guidesImg" src="images/campingRV.jpg">
      <p><strong>Certification: </strong>4L</p>
      <p><strong>Years of Experience: </strong>9</p>
      <p><strong>Email: </strong>cory@sra.com</p>
      <p><strong>Biography: </strong>Cory grew up in New York City, but each summer his family left the city to spend time backpacking and whitewater rafting. He came to Idaho for college and never left the state. He spends his summers as a guide on the
        rivers he loves.</p>
    </div>
    <!--end .accordion-section-content-->
  </div>
  <div class="accordion-section">
    <a class="accordion-section-title" href="#accordion-2">Cory Delancey</a>

    <div id="accordion-2" class="accordion-section-content">
      <img class="guidesImg" src="images/campingRV.jpg">
      <p><strong>Certification: </strong>4L</p>
      <p><strong>Years of Experience: </strong>9</p>
      <p><strong>Email: </strong>cory@sra.com</p>
      <p><strong>Biography: </strong>Cory grew up in New York City, but each summer his family left the city to spend time backpacking and whitewater rafting. He came to Idaho for college and never left the state. He spends his summers as a guide on the
        rivers he loves.</p>
    </div>
    <!--end .accordion-section-content-->
  </div>
  <div class="accordion-section">
    <a class="accordion-section-title" href="#accordion-3">Cory Delancey</a>

    <div id="accordion-3" class="accordion-section-content">
      <img class="guidesImg" src="images/campingRV.jpg">
      <p><strong>Certification: </strong>4L</p>
      <p><strong>Years of Experience: </strong>9</p>
      <p><strong>Email: </strong>cory@sra.com</p>
      <p><strong>Biography: </strong>Cory grew up in New York City, but each summer his family left the city to spend time backpacking and whitewater rafting. He came to Idaho for college and never left the state. He spends his summers as a guide on the
        rivers he loves.</p>
    </div>
    <!--end .accordion-section-content-->
  </div>
  <!--end .accordion-section-->
</div>
<!--end .accordion-->

</main>

相关问题
最新问题