响应手风琴问题

Question

我正在修改手风琴的响应式标签，请参阅jsfiddle

单击当前的“活动”选项卡时，它隐藏了我所理解的代码中要执行的操作，但是，如果这种情况没有发生并且没有隐藏，我希望这样做。 这是当前的javascript：

$('#nav').children('li').first().children('a').addClass('active')
        .next().addClass('is-open').show();

$('#nav').on('click', 'li > a', function() {

      if (!$(this).hasClass('active')) {

        $('#nav .is-open').removeClass('is-open').hide();
        $(this).next().toggleClass('is-open').toggle();

        $('#nav').find('.active').removeClass('active');
        $(this).addClass('active');
      } else {
        $('#nav .is-open').removeClass('is-open').hide();
        $(this).removeClass('active');
      }
});

基本上，它只是根据所单击的内容以及当前是否处于活动状态来应用类。 我想我需要改变这种逻辑吗？

Answer 1

如果我理解的是正确的，则您想在再次单击时停止隐藏活动的div。 只需删除其他部分...

$('#nav').children('li').first().children('a').addClass('active')
        .next().addClass('is-open').show();

$('#nav').on('click', 'li > a', function() {

      if (!$(this).hasClass('active')) {

        $('#nav .is-open').removeClass('is-open').hide();
        $(this).next().toggleClass('is-open').toggle();

        $('#nav').find('.active').removeClass('active');
        $(this).addClass('active');
      }
});

检查这个小提琴