Question

我有一个类别列表。此列表包含＆gt; 5个元素，当我在桌面上时，它应该只显示5个元素，并且列表可以使用按钮扩展（已经处理过了）。当我将窗口大小调整到一定大小时，它应该只显示列表中的4个元素。我开始工作了。但是，当我再次将窗口调整为更大的尺寸时，第5个元素不再出现。

$(document).ready(function() {
	$('div.category-wrapper').each(function() {
  	var numEl = $(this).find('a').length;
    if (numEl > 5) {
    	$('a', this).eq(4).nextAll().hide().addClass('shop-category-toggleable');
    }
  });
  
  $(window).resize(function() {
    if ($('#tablet-indicator').is(':visible')) {
      $('div.category-wrapper').each(function() {
        var numEl = $(this).find('a').length;
        if (numEl > 4) {
          $('a', this).eq(3).nextAll().hide().addClass('shop-category-toggleable');
        }
      });
    }
  });

  $(window).resize(function() {
    if ($('#desktop-indicator').is(':visible')) {
      $('div.category-wrapper').each(function() {
        var numEl = $(this).find('a').length;
        console.log(numEl);
        if (numEl > 5) {
          $('a', this).eq(4).nextAll().hide().addClass('shop-category-toggleable');
        }
      });
    }
  });
});

 .category-wrapper .shop-category {
   display: block;
 }
 
 #tablet-indicator,
 #desktop-indicator {
   width: 10px;
   height: 10px;
 }
 
 #tablet-indicator {
   background-color: green;
 }
 
 #desktop-indicator {
   background-color: red;
 }

@media (min-width: 300px) {
  #tablet-indicator {
    display: block;
  }
  #desktop-indicator {
    display: none;
  }
}

@media (min-width: 600px) {
  #tablet-indicator {
    display: none;
  }
  #desktop-indicator {
    display: block;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="category-wrapper">
  <a href="#" class="shop-category">shop category</a>
  <a href="#" class="shop-category">shop category</a>
  <a href="#" class="shop-category">shop category</a>
  <a href="#" class="shop-category">shop category</a>
  <a href="#" class="shop-category">shop category</a>
  <a href="#" class="shop-category">shop category</a>
  <a href="#" class="shop-category">shop category</a>
  <a href="#" class="shop-category">shop category</a>
  <a href="#" class="shop-category">shop category</a>
  <a href="#" class="shop-category">shop category</a>
  <a href="#" class="shop-category">shop category</a>
</div>

<div id="desktop-indicator"></div>
<div id="tablet-indicator"></div>

我已尝试将if ($('#desktop-indicator').is(':visible'))部分作为else if部分添加到第一个resize函数中，并将其作为自己的if部分。当前的代码也不起作用，我怀疑我真的需要两个resize()块，但绝望哦。

此处调整大小可能更容易，与上面的代码相同：https://jsfiddle.net/v7obssas/

Answer 1

您只隐藏类别

您忘记做的是在隐藏它们之前显示您的类别。所以每当你做的时候

$('a', this)
    .eq(4)
    .nextAll()
    .hide()
    .addClass('shop-category-toggleable');

您没有显示已隐藏的元素。这就是为什么当你只使用四个元素时，你总是保持四个，因为你没有在重新应用可见状态之前显示任何隐藏的元素。

你应该这样做

$('a', this)
    .show() // add this extra line to initially show all categories
    .eq(4)
    .nextAll()
    .hide()
    .addClass('shop-category-toggleable');

不要担心此代码会显示您的所有分类，因为它会同步执行，这意味着当您的脚本移交处理时，渲染所有元素都会有正确的样式应用于渲染引擎正确显示。

＆＃13;

$(document).ready(function() {
	$('div.category-wrapper').each(function() {
  	var numEl = $(this).find('a').length;
    if (numEl > 5) {
    	$('a', this).show().eq(4).nextAll().hide().addClass('shop-category-toggleable');
    }
  });
  
  $(window).resize(function() {
    if ($('#tablet-indicator').is(':visible')) {
      $('div.category-wrapper').each(function() {
        var numEl = $(this).find('a').length;
        if (numEl > 4) {
          $('a', this).show().eq(3).nextAll().hide().addClass('shop-category-toggleable');
        }
      });
    }
  });

  $(window).resize(function() {
    if ($('#desktop-indicator').is(':visible')) {
      $('div.category-wrapper').each(function() {
        var numEl = $(this).find('a').length;
        console.log(numEl);
        if (numEl > 5) {
          $('a', this).show().eq(4).nextAll().hide().addClass('shop-category-toggleable');
        }
      });
    }
  });
});

＆＃13;

 .category-wrapper .shop-category {
   display: block;
 }
 
 #tablet-indicator,
 #desktop-indicator {
   width: 10px;
   height: 10px;
 }
 
 #tablet-indicator {
   background-color: green;
 }
 
 #desktop-indicator {
   background-color: red;
 }

@media (min-width: 300px) {
  #tablet-indicator {
    display: block;
  }
  #desktop-indicator {
    display: none;
  }
}

@media (min-width: 600px) {
  #tablet-indicator {
    display: none;
  }
  #desktop-indicator {
    display: block;
  }
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="category-wrapper">
  <a href="#" class="shop-category">shop category</a>
  <a href="#" class="shop-category">shop category</a>
  <a href="#" class="shop-category">shop category</a>
  <a href="#" class="shop-category">shop category</a>
  <a href="#" class="shop-category">shop category</a>
  <a href="#" class="shop-category">shop category</a>
  <a href="#" class="shop-category">shop category</a>
  <a href="#" class="shop-category">shop category</a>
  <a href="#" class="shop-category">shop category</a>
  <a href="#" class="shop-category">shop category</a>
  <a href="#" class="shop-category">shop category</a>
</div>

<div id="desktop-indicator"></div>
<div id="tablet-indicator"></div>

＆＃13;

明智的改变

虽然我不会使用Javascript来执行此操作。你已经在使用CSS媒体查询了（当你低于300px时BTW有一个错误，两个指标都可见）所以为什么不使用媒体查询来限制显示的类别数量呢？

在窗口上隐藏和显示元素调整大小

1 个答案:

您只隐藏类别

明智的改变