将可折叠功能添加到js选项卡

Question

我有一些制作标签，我希望它们可以折叠，但是使用我当前的代码，因为脚本使用addClass / { {1}}而不是别的，我不确定如何解决这个问题：

代码

＆＃13;

＆＃13;

removeClass

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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