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 as

<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没有工作，而是关闭另一个崩溃它关闭自我div

Answer 1

您需要找到点击的accordion-container

的兄弟姐妹

＆＃13;

$(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>");
    }
  });
});

＆＃13;

.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;
  }
}

＆＃13;

<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>

＆＃13;

Answer 2

请看这种方法：

＆＃13;

$(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 the already open tab
      $(".open").not(accordion).removeClass("open");
      $('.accordion-content').not(accordionContent).slideUp(function() {
        $('html, body').animate({
          scrollTop: accordion.offset().top
        }, 10);
      });



    } else {
      accordionToggleIcon.html("<i class='fa fa-plus-circle'></i>");
    }





  });
});

＆＃13;

.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;
  }
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/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>

＆＃13;

Answer 3

使用jQuery UI Accordion功能：这里是详细信息Link，现在是 JSFiddle

<script>
  $( function() {
    $( "#accordion" ).accordion({
      collapsible: true
    });
  } );
  </script>

并将您的元素放在#accordion div元素中。

如何在另一个打开时关闭崩溃

3 个答案: