向 js 选项卡添加可折叠功能

Question

我正在制作一些选项卡，我希望它们可以折叠，但使用我当前的代码，这是不可能的，因为脚本使用 addClass/removeClass而不是其他东西，我不确定如何解决这个问题：

代码

$(document).ready(function() {
  $('.tabs .tab-links a').on('click', function(e) {
    var currentAttrValue = $(this).attr('href');
    $('.tabs ' + currentAttrValue).fadeIn(600).siblings().hide();
    $(this).parent('li').addClass('active').siblings().removeClass('active');

    e.preventDefault();
  });
});

$(document).ready(function() {
  $('#filterOptions li a').click(function() {
    var ourClass = $(this).attr('class');
    $('#filterOptions li').removeClass('active');
    $(this).parent().addClass('active');

    if (ourClass == 'all') {
      $('#ourHolder').children('div.item').show();
    } else {
      $('#ourHolder').children('div:not(.' + ourClass + ')').hide();
      $('#ourHolder').children('div.' + ourClass).show();
    }
    return false;
  });
});

.tabs {
  width: 200px;
  padding: 0;
  overflow: hidden;
}
.tab-links li {
  display: inline;
  text-align: center;
  list-style: none;
  margin-left: 0;
  padding: 0;
}
ul.tab-links {
  padding: 0 0 10px 0;
  text-align: center;
  list-style: none;
  margin: 0!important;
}
.tab-links a {
  color: #000;
}
.tab-links b {
  color: #fff000;
  font-weight: 900;
}
.tab {
  display: none;
}
.tab.active {
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="tabs">
  <ul class="tab-links">
    <li class="active">
      <a href="#tab1"><b>first</b></a>
    </li>
    <li><a href="#tab2">second</a>
    </li>
    <li><a href="#tab3">third</a>
    </li>
  </ul>
</div>
<div class="tabs">

  <!--  TAB 1  -->
  <div id="tab1" class="tab">
    first
  </div>

  <!-- TAB 2  -->
  <div id="tab2" class="tab">
    second
  </div>

  <div id="tab3" class="tab">
    third
  </div>

Answer 1

使用 toggleClass 检查此 fiddle（但不确定我是否理解您的要求）

 $(document).ready(function() {
    $('.tabs .tab-links a').on('click', function(e)  {
          var currentAttrValue = $(this).attr('href');
        if ( $('.tabs ' + currentAttrValue).is(':visible') )
        {
          $(this).parent('li').toggleClass('active');
          $('.tabs ' + currentAttrValue).hide();
        }
        else
        {
          $('.tabs ' + currentAttrValue).fadeIn(600).siblings().hide();
          $(this).parent('li').toggleClass('active').siblings().removeClass('active');
        }

        e.preventDefault();
    });
});

.tab-links li.active {
    color:#fff000;
    font-weight:900;
}

<div class="tabs">
    <ul class="tab-links">
        <li class="active">
        <a href="#tab1">first</a></li>
        <li><a href="#tab2">second</a></li>
        <li><a href="#tab3">third</a></li>
    </ul>
</div>

Answer 2

试试这个：

    $(document).ready(function() {
      $('.tab-links li a').click(function() {
        var ourClass = $(this).attr('href');

        if(!$(ourClass).hasClass('active')){
        $('.tabs').find('.active').removeClass('active');
        }

        $(ourClass).toggleClass('active');

        return false;
      });
    });

Css:


.tab {
  //  display:none;
     opacity: 0;
       -webkit-transition: opacity .8s ease-in;
       -moz-transition: opacity .8s ease-in;
        -ms-transition: opacity .8s ease-in;
         -o-transition: opacity .8s ease-in;
            transition: opacity .8s ease-in;
            height: 0px;
}

.tab.active {
   // display:block;
    opacity: 1;
    height: 20px;

}

Fiddle

向 js 选项卡添加可折叠功能

add collapsible functionality to js tabs

javascript

jquery

tabs

代码