Question

我想实现一个列表，可以使用按钮添加新项目。列表顶部的一个按钮用于添加新项目，另一个按钮位于底部以附加新项目。

HTML：

<div>
    <div id="list">
      <button class="addbtn">prepend item</button>
      <ul id="items"></ul>
      <button class="addbtn">append item</button>
    </div>
</div>

只有悬停包含列表的div（通过css：hover选择器）时，按钮才会显示。

CSS：

.addbtn {
  display: none;
}

#list:hover .addbtn {
  display: block;
}

当列表为空时，是否有一种方法（不使用JS，仅使用CSS）只显示追加按钮，而不显示前置按钮？如果列表包含至少一个项目，则应显示两个按钮。

JSFiddle：https://jsfiddle.net/uLmzom18/

编辑：这是带有工作解决方案的JSFiddle：https://jsfiddle.net/khu7bahm/

Answer 1

如果您对display:flex使用#list，则可以撤消按钮的顺序并使用css sibling selector +

看到这个小提琴：https://jsfiddle.net/sb7zewp6/1/

如果您需要有关此问题的更多信息，我可以扩展此答案，但我认为仅在display:flex是一个选项时才需要这样做。

有关display：flex usage at caniuse.com

的更多信息

$(".addbtn").click(function() {
  if($(this).hasClass("prepend"))
  	$("#items").prepend($("<li>").text("prepended item " + $("#items").children().length));
	else
		$("#items").append($("<li>").text("appended item " + $("#items").children().length));
});

#list {
  width: 300px;
  min-height: 10em;
  background-color: #fff;
  display:flex;
}
.addbtn {
  display: none;
}

#items:empty+.addbtn {
  display:none !important;
}

#list:hover .addbtn {
  display: block;
}


.addbtn.append {
  order:3;
}
#items {
  order:2;
  outline:1px solid red;
}
.addbtn.prepend {
  order:1;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
    <div id="list">
      <button class="addbtn append">append item</button>
      <ul id="items"></ul>
      <button class="addbtn prepend">prepend item</button>
    </div>
</div>

Answer 2

你不能用CSS影响DOM流中另一个向上的元素。

但你可以欺骗它：逆转HTML中元素的顺序，并使用flex

重新排列它们

＆＃13;

ul:empty ~ .addbtn {
  background-color: lightgreen;
}

#list, #list2 {
  display: inline-flex;
  flex-direction: column-reverse;
}

＆＃13;

<div>
    <div id="list">
      <button class="addbtn">prepend item</button>
      <ul id="items"></ul>
      <button class="addbtn">append item</button>
    </div>
</div>
<div>
    <div id="list2">
      <button class="addbtn">prepend item</button>
      <ul id="items">
      <li>1</li>
      <li>2</li>
      </ul>
      <button class="addbtn">append item</button>
    </div>
</div>

＆＃13;

Answer 3

您无法使用CSS测试元素的空白，因为它无法遍历。你可以做的是，如果你使用jQuery，它是可能的。

如果您想为当前的HTML提供基于纯CSS的解决方案，那么不！

但是，如果您使用的是某些无效的HTML，则可能有效：

#items .addbtn:last-child {
  display: none;
}

<div>
  <div id="list">
    <ul id="items">
      <button class="addbtn">prepend item</button>
    </ul>
    <button class="addbtn">append item</button>
  </div>
</div>

在这里，我已将addbtn直接放在<ul>内，这是错误的。但如果你有决心，我们可以做得更好：

#items .btnAdd {
  margin-left: -40px;
  margin-bottom: 20px;
}
#items .btnAdd:last-child {
  display: none;
}

<p>No Prepend Button</p>
<div>
  <div id="list">
    <ul id="items">
      <li class="btnAdd"><button class="addbtn">prepend item</button></li>
    </ul>
    <button class="addbtn">append item</button>
  </div>
</div>
<hr />
<p>Prepend Button Shown</p>
<div>
  <div id="list">
    <ul id="items">
      <li class="btnAdd"><button class="addbtn">prepend item</button></li>
      <li>One item</li>
    </ul>
    <button class="addbtn">append item</button>
  </div>
</div>

最终片段是基于纯CSS的解决方案。

仅当兄弟姐妹不为空时才显示按钮

3 个答案: