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 =“capitulo”）然后是每个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();
    });
});

演示：Fiddle

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

＆＃13;

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

＆＃13;

.cap .capcierre {
  display: none;
}

＆＃13;

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

＆＃13;

增强手风琴

2 个答案: