javascript - 如何在另一个打开时关闭折叠

Question

我试图在打开任何折叠时关闭另一个折叠。下面是 html 代码和 jquery 代码

  <div class="content white">   <h2>Italian Cities</h2>     <div
    class="accordion-container">        <a href="#"
    class="accordion-toggle">Rome <span class="toggle-icon"><i class="fa
    fa-plus-circle"></i></span></a>         <div class="accordion-content">
                <img src="images/italy-thumb_rome.jpg" />           <p>Lorem ipsum dolor
    sit amet, consectetur adipisicing elit, sed do eiusmod tempor
    incididunt ut labore et dolore magna aliqua. Ut enim ad minim
    veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
    ea commodo consequat. Duis aute irure dolor in reprehenderit in
    voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
                <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem
    accusantium doloremque laudantium, totam rem aperiam, eaque ipsa
    quae ab illo inventore veritatis et quasi architecto beatae vitae
    dicta sunt explicabo. Excepteur sint occaecat cupidatat non
    proident, sunt in culpa qui officia deserunt mollit anim id est
    laborum.</p>        </div>      <!--/.accordion-content-->  </div>
        <!--/.accordion-container-->    <div class="accordion-container">
            <a href="#" class="accordion-toggle">Florence <span
    class="toggle-icon"><i class="fa fa-plus-circle"></i></span></a>
            <div class="accordion-content">             <img
    src="images/italy-thumb_florence.jpg" />            <p>Lorem ipsum dolor sit
    amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
    ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
    nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit
    esse cillum dolore eu fugiat nulla pariatur.</p>            <p>Sed ut
    perspiciatis unde omnis iste natus error sit voluptatem accusantium
    doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo
    inventore veritatis et quasi architecto beatae vitae dicta sunt
    explicabo. Excepteur sint occaecat cupidatat non proident, sunt in
    culpa qui officia deserunt mollit anim id est laborum.</p>      </div>
            <!--/.accordion-content-->  </div>  <!--/.accordion-container-->
        <div class="accordion-container">       <a href="#"
    class="accordion-toggle">Venice <span class="toggle-icon"><i
    class="fa fa-plus-circle"></i></span></a>       <div
    class="accordion-content">          <img
    src="images/italy-thumb_venice.jpg" />          <p>Lorem ipsum dolor sit
    amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
    ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
    nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit
    esse cillum dolore eu fugiat nulla pariatur.</p>            <p>Sed ut
    perspiciatis unde omnis iste natus error sit voluptatem accusantium
    doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo
    inventore veritatis et quasi architecto beatae vitae dicta sunt
    explicabo. Excepteur sint occaecat cupidatat non proident, sunt in
    culpa qui officia deserunt mollit anim id est laborum.</p>      </div>
            <!--/.accordion-content-->  </div>  <!--/.accordion-container-->
        <div class="accordion-container">       <a href="#"
    class="accordion-toggle">Cinque Terre <span class="toggle-icon"><i
    class="fa fa-plus-circle"></i></span></a>       <div
    class="accordion-content">          <img
    src="images/italy-thumb_cinque-terre.jpg" />            <p>Lorem ipsum dolor
    sit amet, consectetur adipisicing elit, sed do eiusmod tempor
    incididunt ut labore et dolore magna aliqua. Ut enim ad minim
    veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
    ea commodo consequat. Duis aute irure dolor in reprehenderit in
    voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
                <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem
    accusantium doloremque laudantium, totam rem aperiam, eaque ipsa
    quae ab illo inventore veritatis et quasi architecto beatae vitae
    dicta sunt explicabo. Excepteur sint occaecat cupidatat non
    proident, sunt in culpa qui officia deserunt mollit anim id est
    laborum.</p>        </div>      <!--/.accordion-content-->  </div>
        <!--/.accordion-container-->    <div class="accordion-container">
            <a href="#" class="accordion-toggle">Pompeii <span
    class="toggle-icon"><i class="fa fa-plus-circle"></i></span></a>
            <div class="accordion-content">             <img
    src="images/italy-thumb_pompeii.jpg" />             <p>Lorem ipsum dolor sit
    amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
    ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
    nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit
    esse cillum dolore eu fugiat nulla pariatur.</p>            <p>Sed ut
    perspiciatis unde omnis iste natus error sit voluptatem accusantium
    doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo
    inventore veritatis et quasi architecto beatae vitae dicta sunt
    explicabo. Excepteur sint occaecat cupidatat non proident, sunt in
    culpa qui officia deserunt mollit anim id est laborum.</p>      </div>
            <!--/.accordion-content-->  </div>  <!--/.accordion-container-->
    </div>

jquery 如下所示

$(document).ready(function () {
    $('.accordion-toggle').on('click', function(event){
        event.preventDefault();
        // create accordion variables
        var accordion = $(this);
        var accordionContent = accordion.next('.accordion-content');
        var accordionToggleIcon = $(this).children('.toggle-icon');

        // toggle accordion link open class
        accordion.toggleClass("open");
        // toggle accordion content
        accordionContent.slideToggle(250);

        // change plus/minus icon
        if (accordion.hasClass("open")) {
            accordionToggleIcon.html("<i class='fa fa-minus-circle'></i>");
        } else {
            accordionToggleIcon.html("<i class='fa fa-plus-circle'></i>");
        }
    //  
    var targetElement = $(this).next('.accordion-content');
    targetElement.slideToggle();
    targetElement.siblings('.accordion-content').slideUp();

    });
});

CSS 为

<style>
            .accordion-container {
    width: 100%;
    margin: 0 0 20px;
    clear: both;
}
.accordion-toggle {
    position: relative;
    display: block;
    padding: 20px;
    font-size: 1.5em;
    font-weight: 300;
    background: #999;
    color: #fff;
    text-decoration: none;
}
.accordion-toggle.open {
    background: #333;
    color: #fff;
}
.accordion-toggle:hover {
    background: #666;
}
.accordion-toggle span.toggle-icon {
    position: absolute;
    top: 9px;
    right: 20px;
    font-size: 1.5em;
}
.accordion-content {
    display: none;
    padding: 20px;
    overflow: auto;
}
.accordion-content img {
    display: block;
    float: left;
    margin: 0 15px 10px 0;
    max-width: 100%;
    height: auto;
}

/* media query for mobile */
@media (max-width: 767px) {
    .accordion-content {
        padding: 10px 0;
        overflow: inherit;
    }
}    
            </style>

但是上面的 jquery 没有工作而不是关闭另一个折叠它的关闭 self div

Answer 1

你需要找到被点击的accordion-container的 sibling

$(document).ready(function() {
  $('.accordion-toggle').on('click', function(event) {
    event.preventDefault();
    // create accordion variables
    var accordion = $(this);
    var accordionContent = accordion.next('.accordion-content');
    var accordionToggleIcon = $(this).children('.toggle-icon');

    // toggle accordion link open class
    accordion.toggleClass("open");
    // toggle accordion content
    accordionContent.slideToggle(250);

    // change plus/minus icon
    if (accordion.hasClass("open")) {
      accordionToggleIcon.html("<i class='fa fa-minus-circle'></i>");

      //close other open elements
      var $siblings = accordion.parent().siblings('.accordion-container');
      $siblings.find('.accordion-content').slideUp();
      $siblings.find('.accordion-toggle.open').removeClass('open').find('.toggle-icon').html("<i class='fa fa-plus-circle'></i>");

    } else {
      accordionToggleIcon.html("<i class='fa fa-plus-circle'></i>");
    }
  });
});

.open {
  background-color: lightgrey;
}
.accordion-container {
  width: 100%;
  margin: 0 0 20px;
  clear: both;
}
.accordion-toggle {
  position: relative;
  display: block;
  padding: 20px;
  font-size: 1.5em;
  font-weight: 300;
  background: #999;
  color: #fff;
  text-decoration: none;
}
.accordion-toggle.open {
  background: #333;
  color: #fff;
}
.accordion-toggle:hover {
  background: #666;
}
.accordion-toggle span.toggle-icon {
  position: absolute;
  top: 9px;
  right: 20px;
  font-size: 1.5em;
}
.accordion-content {
  display: none;
  padding: 20px;
  overflow: auto;
}
.accordion-content img {
  display: block;
  float: left;
  margin: 0 15px 10px 0;
  max-width: 100%;
  height: auto;
}
/* media query for mobile */

@media (max-width: 767px) {
  .accordion-content {
    padding: 10px 0;
    overflow: inherit;
  }
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="content white">
  <h2>Italian Cities</h2> 
  <div class="accordion-container"> <a href="#" class="accordion-toggle">Rome <span class="toggle-icon"><i class="fa
    fa-plus-circle"></i></span></a> 
    <div class="accordion-content">
      <img src="images/italy-thumb_rome.jpg" />
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
        dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
      <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Excepteur sint occaecat cupidatat
        non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      </p>
    </div>
    <!--/.accordion-content-->
  </div>
  <!--/.accordion-container-->
  <div class="accordion-container">
    <a href="#" class="accordion-toggle">Florence <span
    class="toggle-icon"><i class="fa fa-plus-circle"></i></span></a>
    <div class="accordion-content">
      <img src="images/italy-thumb_florence.jpg" />
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
        dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
      <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Excepteur sint occaecat cupidatat
        non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
    <!--/.accordion-content-->
  </div>
  <!--/.accordion-container-->
  <div class="accordion-container"> <a href="#" class="accordion-toggle">Venice <span class="toggle-icon"><i
    class="fa fa-plus-circle"></i></span></a> 
    <div class="accordion-content">
      <img src="images/italy-thumb_venice.jpg" />
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
        dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
      <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Excepteur sint occaecat cupidatat
        non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
    <!--/.accordion-content-->
  </div>
  <!--/.accordion-container-->
  <div class="accordion-container"> <a href="#" class="accordion-toggle">Cinque Terre <span class="toggle-icon"><i
    class="fa fa-plus-circle"></i></span></a> 
    <div class="accordion-content">
      <img src="images/italy-thumb_cinque-terre.jpg" />
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
        dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
      <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Excepteur sint occaecat cupidatat
        non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      </p>
    </div>
    <!--/.accordion-content-->
  </div>
  <!--/.accordion-container-->
  <div class="accordion-container">
    <a href="#" class="accordion-toggle">Pompeii <span
    class="toggle-icon"><i class="fa fa-plus-circle"></i></span></a>
    <div class="accordion-content">
      <img src="images/italy-thumb_pompeii.jpg" />
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
        dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
      <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Excepteur sint occaecat cupidatat
        non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
    <!--/.accordion-content-->
  </div>
  <!--/.accordion-container-->
</div>