如何仅切换* next *&隐藏其他班级 [英] How to toggle only the *next* & hide other class

问题描述

我在可折叠jquery中遇到了一些问题.

i have some problem in collapsable jquery.

我的HTML元素就是这样

My HTML elements are like this

    <div id="first" class="collapse-container">

        <h1 class="collapse">
        <span class="arrow-r"></span>First Heading</h1>
        <div class="accordion-active">
            <p>First Section</p>
            <p>First Section</p><p>First Section</p>
        </div>
        <h1 class="collapse"><span class="arrow-r"></span>Second Heading</h1>
        <div class="accordion-active">
            <p>Second Section</p>
            <p>Second Section</p>
        </div>
        <h1 class="collapse"><span class="arrow-r"></span>Third Heading</h1>
        <div class="accordion-active">
            <p>Third Section</p>
            <p>Second Section</p>
        </div>
    </div>

我正在使用这个jquery来切换类

I am using this jquery for toggle class

    $(document).ready(function () {
        $(".collapse").click(function () {
            $(this).toggleClass("active");
        });
    });

    jQuery(document).ready(function() {
      jQuery(".accordion-active").hide();
      //toggle the componenet with class msg_body
      jQuery(".collapse").click(function()
      {
        jQuery(this).next(".accordion-active").slideToggle(0);

      });
    });

现在是我的问题，当我单击第一个h1标签时，它仅显示其elements.没关系. 但是现在，当我单击2nd h1标签时，它会显示其元素，但第一个H1标签仍处于打开状态.

Now my problem, when i clicks on first h1 tag it only shows its elements.thats fine. But now when i click on 2nd h1 tag it shows its elements, BUT FIRST H1 TAG IS STILL OPEN.

当一个(下一个类)处于活动状态时，如何设置所有其他的隐藏?

How can i set all others hide, while one (next class) is active?

谢谢

推荐答案

尝试一下.

$(".accordion-active").hide();

//toggle the componenet with class msg_body
$(".collapse").click(function(){

  var $this = $(this); //  Cacheing $(this)

  $('.accordion-active').slideUp();

  if( !$this.next(".accordion-active").is('.open') ){
    //$('h1').removeClass('active');
    $('.accordion-active').removeClass('open');
    $this.addClass("active").siblings("h1").removeClass("active");
    $this.next(".accordion-active").addClass('open').slideDown();
  } else {
    $("h1").removeClass("active");
    $this.next(".accordion-active").removeClass('open').slideUp(); 
  }

});

小提琴演示

这篇关于如何仅切换* next *&隐藏其他班级的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！