Question

我有一个包含16个产品的列表，但我想一次只显示8个产品，并带有一个按钮来切换视图。

我有这个小提示给你看.. https://jsfiddle.net/5cLvq6bm/2/
如果在css我有这个，一切都很好：

ul#carter li:nth-of-type(1n+9) {
  display: none;
}

但如果我添加!important <：p>，则停止工作

ul#carter li:nth-of-type(1n+9) {
  display: none!important;
}

如果我不使用!important，display:none不会影响我的列表...

有什么建议吗？

Answer 1

我不明白你为什么会让事情变得复杂。嗯，这是一个简单的解决方案：

＆＃13;

$("li.product:gt(8)").hide();
$(".button").click(function() {
  if ($("li.product").not(":visible").length > 0) {
    $("li.product").toggle("slow");
  }
});

＆＃13;

ul {
  display: inline;
}

li {
  display: inline;
}

.button {
  background-color: #ed241a;
  color: #fff;
  font-family: open sans;
  font-size: 10px;
  font-weight: bold;
  padding: 14px;
  position: absolute;
  text-transform: uppercase;
}

＆＃13;

<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
<ul id="carter" class="products">
  <li class='product'><img src="http://placehold.it/100x100"></li>
  <li class='product'><img src="http://placehold.it/100x100"></li>
  <li class='product'><img src="http://placehold.it/100x100"></li>
  <li class='product'><img src="http://placehold.it/100x100"></li>
  <li class='product'><img src="http://placehold.it/100x100"></li>
  <li class='product'><img src="http://placehold.it/100x100"></li>
  <li class='product'><img src="http://placehold.it/100x100"></li>
  <li class='product'><img src="http://placehold.it/100x100"></li>
  <li class='product'><img src="http://placehold.it/100x100"></li>
  <li class='product'><img src="http://placehold.it/100x100"></li>
  <li class='product'><img src="http://placehold.it/100x100"></li>
  <li class='product'><img src="http://placehold.it/100x100"></li>
  <li class='product'><img src="http://placehold.it/100x100"></li>
  <li class='product'><img src="http://placehold.it/100x100"></li>
  <li class='product'><img src="http://placehold.it/100x100"></li>
  <li class='product'><img src="http://placehold.it/100x100"></li>
</ul>
<br>
<a href="#" class="button">Switch View</a>

＆＃13;

Answer 2

尝试：ul { display: inline !important; }

因为你需要！重要的是重写以前！重要..

另请查看本文的示例，而不是使用＆＃39; important＆＃39;：https://css-tricks.com/places-its-tempting-to-use-display-none-but-dont/

仅显示列表的一部分并切换部件

2 个答案: