javascript - 可在移动设备上关闭所有部分的 Accordion ，但在平板电脑和台式机上始终打开一个 Accordion 部分

Question

我有一个 Accordion ，一次只打开一个部分。在台式机/平板电脑屏幕尺寸上，需要始终有一个打开的部分，这样就没有空白区域。但是在移动设备上，同样的 Accordion 将需要关闭所有部分的能力(即，如果您单击一个已经打开的部分，它将关闭并且不会打开其他部分)。

这是我目前拥有的一个 jsfiddle。似乎没有触发嵌套的 if else 语句，并且仅使用未嵌套的 if else 语句中的 else。 https://jsfiddle.net/bluebomber/x40jq16L/1/

这是我目前使用的 jQuery:

$('li').click(function(width) {
   var thisClicked = $(this);
   if (width <= 767) {
      if (thisClicked.hasClass('selected')) {
         $('li').removeClass('selected');
      } else {
         $('li').removeClass('selected');
         thisClicked.addClass('selected');
      }
   } else {
      $('li').removeClass('selected');
      thisClicked.addClass('selected');
   }
});

Answer 1

您使用 width，但带有有关事件点击的信息对象。

如果你使用 console.log(width); 你可以看到这个对象。试试这个:

$('.tabs.standard > ul > li').click(function(event) {
   console.log(event); // event(before called width) is a object, no integer or numeric value...
   var thisClicked = $(this),
   width = $(this).outerWidth(); // This calculate width
   if (width <= 767) {
      if (thisClicked.hasClass('selected')) {
         $('.tabs.standard > ul > li').removeClass('selected');
      } else {
         $('.tabs.standard > ul > li').removeClass('selected');
         thisClicked.addClass('selected');
      }
   } else {
      $('.tabs.standard > ul > li').removeClass('selected');
      thisClicked.addClass('selected');
   }
});

在这里了解 outerWidth: http://api.jquery.com/outerwidth/