jQuery Custom Accordion - 关闭当前打开部分的问题

Question

我提供了一个 JS Fiddle，但它是针对移动设备的，因此它可以减少窗口宽度或打开控制台，但问题是；

它会打开默认选项卡及其内容，单击另一个选项卡会打开并向下滚动。这很好，但是它不会关闭上一个选项卡，当我单击关闭时会关闭所有打开的并且使可用性不完美。

有什么想法吗？我认为有问题的部分在这个函数中：

var tabClick = function(x) {

并认为我的 isOpen 条件是我做错了

小提琴：https://jsfiddle.net/6wttzcg5/5/

JS：

$(document).ready(function() {

var originalTabs = $('.originalTabs').html();
var windowWidth = 0;
var time = 500;

function clearTabs() {
  $('.originalTabs').html(originalTabs);
}

//clearTabs();
//desktopTabs(); 

function desktopTabs() {
  clearTabs();

  // cretate tabs for desktop
  var headers = $("#tab_description h6");

  $('#tab_description h6').each(function(i) {
    $(this).nextUntil("h6").andSelf().wrapAll('<div class="tab" id="tab-' + i + '"/>');
  });

  for (var i = 0; i < headers.length; i++) {
    $('.tabs').append('<li class=""><a href="#tab-' + i + '">' + headers[i].innerHTML + '</a></li>');
  }

  $('ul.tabs').each(function() {
    var active, content, links = $(this).find('a');
    var listitem = $(this).find('li');
    active = listitem.first().addClass('active');
    content = $(active.attr('href'));
    $('.tab').hide();
    $(this).find('a').click(function(e) {
      $('.tab').hide();
      $('ul.tabs li').removeClass('active');
      content.hide();
      active = $(this);
      content = $($(this).attr('href'));
      active.parent().addClass('active');
      content.show();
      return false;
    });
  });

  headers.remove(); // remove headers from description  
  $('#tab-0').show(); // show the first tab
}

function mobileTabs() {
  clearTabs();

  //alert("loaded mobile");

  var headers = $("#tab_description h6");

  $(headers).each(function(i) {
    $(this).append('<a href="#accordion_' + (i + 1) + '" id="accordion_' + (i + 1) + '"></a>');
    //$(this).nextUntil("h6").andSelf().wrapAll('<div class="aTab" id="tab-'+i+'"/>');
    $(this).on('click tap', function() {
      tabClick($(this));
    });
  });

  $('#tab_description h6').first().addClass("active");
  $('#tab_description h6').first().nextUntil("h6").show();
}

var tabClick = function(x) {

  //alert("clicked");
  var accordionContent = $('#tab_description p, #tab_description ul, #tab_description table, #tab_description div');

  $('#tab_description h6').removeClass("active");
  if (!$(x).hasClass("active")) {
    $(x).addClass("active");
  }

  // Check if current accordion item is open
  var isOpen = $(x).next().is(":visible");

  //console.log(x);
  // Open accordion item if previously closed
  if (!isOpen) {
    $(x).nextUntil('h6').slideDown(time);
    $(x).nextUntil(accordionContent).slideDown(time);
  } else {
    accordionContent.slideUp(time);
  }

  scrollToTab($(x));

}

function scrollToTab(tabScrollTo){
  $("html, body").animate({ scrollTop: $(tabScrollTo).offset().top - 15 }, time);
}

//load default
$(window).on("load",function(){

  if (isMobileLandscapeOnly.matches || isTabletLandscapeOnly.matches) {
    //alert("Mobile / Tablet (Portrait)");
    desktopTabs();
    //$('#tab_description h6').on("click, tap", tabClick);

    //console.log(originalTabs);
  } else if (isMobilePortraitOnly.matches || isTabletPortraitOnly.matches) {
    //alert("Mobile / Tablet (Portrait)");
    mobileTabs();
    //$('#tab_description h6').on("click, tap", tabClick);

  } else if (isDesktop) {
    //alert("Desktop");
    desktopTabs();
  }
});

//bind to resize
$(window).on("orientationchange resize",function(){

  if(windowWidth != $(window).width()){

    if (isMobileLandscapeOnly.matches || isTabletLandscapeOnly.matches) {
      desktopTabs();
      $('#tab_description h6').on("click tap", tabClick);

    } else if (isMobilePortraitOnly.matches || isTabletPortraitOnly.matches) {
      mobileTabs();
      $('#tab_description h6').on("click tap", tabClick);

    } else if (isDesktop) {
      desktopTabs();
    }

    windowWidth = $(window).width();
    delete windowWidth;

  }

});

});

Answer 1

对于任何想知道解决方案的人来说：

小提琴：https://jsfiddle.net/6wttzcg5/12/

JS：

$(document).ready(function() {

  var originalTabs = $('.originalTabs').html();
  var windowWidth = 0;
  var swapSpeed = 300;
  var scrollSpeed = 200;

  function clearTabs() {
    $('.originalTabs').html(originalTabs);
  }

  //clearTabs();
  //desktopTabs(); 

  function desktopTabs() {
    clearTabs();

    // cretate tabs for desktop
    var headers = $("#tab_description h6");

    $('#tab_description h6').each(function(i) {
      $(this).nextUntil("h6").andSelf().wrapAll('<div class="tab" id="tab-' + i + '"/>');
    });

    for (var i = 0; i < headers.length; i++) {
      $('.tabs').append('<li class=""><a href="#tab-' + i + '">' + headers[i].innerHTML + '</a></li>');
    }

    $('ul.tabs').each(function() {
      var active, content, links = $(this).find('a');
      var listitem = $(this).find('li');
      active = listitem.first().addClass('active');
      content = $(active.attr('href'));
      $('.tab').hide();
      $(this).find('a').click(function(e) {
        $('.tab').hide();
        $('ul.tabs li').removeClass('active');
        content.hide();
        active = $(this);
        content = $($(this).attr('href'));
        active.parent().addClass('active');
        content.show();
        return false;
      });
    });

    headers.remove(); // remove headers from description  
    $('#tab-0').show(); // show the first tab
  }

  function mobileTabs() {
    clearTabs();

    //alert("loaded mobile");

    var headers = $("#tab_description h6");

    $(headers).each(function(i) {
      $(this).append('<a href="#accordion_' + (i + 1) + '" id="accordion_' + (i + 1) + '"></a>');
      //$(this).nextUntil("h6").andSelf().wrapAll('<div class="aTab" id="tab-'+i+'"/>');
      $(this).on('click tap', function() {
        tabClick($(this));
      });
    });

    $('#tab_description h6').first().addClass("active");
    $('#tab_description h6').first().nextUntil("h6").show();
  }

  var tabClick = function(x) {

    //alert("clicked");
    var accordionContent = $('#tab_description p, #tab_description ul, #tab_description table, #tab_description div');

    //$('#tab_description h6').removeClass("active");
    if (!$(x).hasClass("active")) {
      $(x).addClass("active");
    }

    // Check if current accordion item is open
    var isOpen = $(x).hasClass("active");

    //console.log(x);
    // Open accordion item if previously closed

    if (isOpen) {
      $('#tab_description h6').removeClass("active");
      $(accordionContent).slideUp(swapSpeed);
      $(x).addClass("active");
      $(x).nextUntil('h6').slideDown(swapSpeed).promise().then(function() {
        scrollToTab($(x));
      });
    }

    return false;

  }

  function scrollToTab(x) {
    $("html, body").animate({
      scrollTop: $(x).offset().top - 10
    }, scrollSpeed);
  }

  //load default
  $(window).on("load", function() {

    /*if (isMobileLandscapeOnly.matches || isTabletLandscapeOnly.matches) {
      //alert("Mobile / Tablet (Portrait)");
      desktopTabs();
      //$('#tab_description h6').on("click, tap", tabClick);

      //console.log(originalTabs);
    } else if (isMobilePortraitOnly.matches || isTabletPortraitOnly.matches) {
      //alert("Mobile / Tablet (Portrait)");
      mobileTabs();
      //$('#tab_description h6').on("click, tap", tabClick);

    } else if (isDesktop) {
      //alert("Desktop");
      desktopTabs();
    } */
    mobileTabs();
  });

  //bind to resize
  $(window).on("orientationchange resize", function() {

    if (windowWidth != $(window).width()) {

      /*if (isMobileLandscapeOnly.matches || isTabletLandscapeOnly.matches) {
        desktopTabs();
        $('#tab_description h6').on("click tap", tabClick);

      } else if (isMobilePortraitOnly.matches || isTabletPortraitOnly.matches) {
        mobileTabs();
        $('#tab_description h6').on("click tap", tabClick);

      } else if (isDesktop) {
        desktopTabs();
      } */

            mobileTabs();
      $('#tab_description h6').on("click tap", tabClick);

      windowWidth = $(window).width();
      delete windowWidth;

    }

  });

});