增强配饰

Question

我有一个手风琴，它在我的页面内工作得很好。当你点击标题时，隐藏的div会显示，当你再次点击它时，它会再次隐藏。我想通过增加一个功能来增强手风琴，使手风琴一次只显示一个项目。换句话说，如果我打开了一个项目，并单击另一个标题，则当前打开的项目将自动关闭。

这是HTML

                    <div class="cap">
                            <div class="capitulo"><h2 class="cap2">Capitulo Segundo</h2></div>  
                                <div class="capcierre2">            
                                    <h3>DE LOS DEBERES DEL PROFESIONISTA.</h3>      


            <p class="art">Articulo 2º</p>
                    <p>El Arquitecto debe poner todos sus conocimientos científicos y recursos técnicos en el desempeño de su profesión.</p>

                            </div>  
                    </div>

这是我的jQuery代码

 <script>
 jQuery(function($){
 var cap = $('.cap [class^="capcierre"]').hide();

 $('h2[class^="c"]').on('click', function(){
    cap.filter('.capcierre' + this.className.slice(-1)).slideToggle(200);
     });
 });
 </script>

如您所见，我有一个main（div class=“cap”）后跟一个（div class=“capitalo”），然后每个h2的可点击标题（h2 class=“cap2”），后跟一个类“cap3”、“cap4”等。然后隐藏的div是（div class=“capcierre2”）“capcierre3”、“capcierre4”等。

它工作得很好，但是我可以向Jquery添加什么来隐藏手风琴中的所有项目，而只显示一个？

谢谢

Answer 1

您可以尝试隐藏所有可见的capcierre元素。

jQuery(function($){
   
  var cap = $('.cap [class^="capcierre"]').hide();

  $('h2[class^="c"]').on('click', function(){
    var target = cap.filter('.capcierre' + this.className.slice(-1));
    $('.cap [class^="capcierre"]:visible').not(target).slideUp();
    target.slideToggle(200);
  });
  
});

Answer 2

你可以

jQuery(function ($) {
    var cap = $('.cap [class^="capcierre"]').hide();

    $('h2[class^="c"]').on('click', function () {
        var $this = cap.filter('.capcierre' + this.className.slice(-1)).slideToggle(200);
    cap.not($this).slideUp();
    });
});

演示：小提琴

更简洁的方法（假设示例中给出的结构）

jQuery(function($) {
  var $caps = $('.cap .capcierre');

  $('.cap .capitulo h2').on('click', function() {
    var $capcierre = $(this).parent().next();
    $capcierre.slideToggle(200);
    $caps.not($capcierre).slideUp();
  });
});

.cap .capcierre {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="cap">
  <div class="capitulo">
    <h2 class="cap1">Capitulo Segundo</h2>
  </div>
  <div class="capcierre capcierre1">
    <h3>DE LOS DEBERES DEL PROFESIONISTA.</h3> 
    <p class="art">Articulo 2º</p>
    <p>El Arquitecto debe poner todos sus conocimientos científicos y recursos técnicos en el desempeño de su profesión.</p>
  </div>
  <div class="capitulo">
    <h2 class="cap2">Capitulo Segundo</h2>
  </div>
  <div class="capcierre capcierre2">
    <h3>DE LOS DEBERES DEL PROFESIONISTA.</h3> 
    <p class="art">Articulo 2º</p>
    <p>El Arquitecto debe poner todos sus conocimientos científicos y recursos técnicos en el desempeño de su profesión.</p>
  </div>
  <div class="capitulo">
    <h2 class="cap3">Capitulo Segundo</h2>
  </div>
  <div class="capcierre capcierre3">
    <h3>DE LOS DEBERES DEL PROFESIONISTA.</h3> 
    <p class="art">Articulo 2º</p>
    <p>El Arquitecto debe poner todos sus conocimientos científicos y recursos técnicos en el desempeño de su profesión.</p>
  </div>
</div>