如果下拉列表中没有数据，如何隐藏下拉列表中的插入符号图标

Question

如果下拉菜单为空，我需要将插入符号图标隐藏在引导下拉列表中。我正在使用引导4。下面的片段清楚地解释了问题的陈述。我正在寻找纯css解决方案。

​

.dropdown-menu:empty{
.dropdown-toggle::after {
    display:none !important;
}
}

<meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>


<div class="dropdown">
    <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
      Dropdown button
    </button>
    <div class="dropdown-menu">
    <!--  <a class="dropdown-item" href="#">Link 1</a>
      <a class="dropdown-item" href="#">Link 2</a>
      <a class="dropdown-item" href="#">Link 3</a> -->
    </div>
  </div>

​

正如你所看到的，我已经在下拉菜单中评论了锚标签。所以现在下拉菜单标签是空的。所以我只想用纯css隐藏下拉按钮中的插入符号。我已经使用内部css来实现这一点，但不确定我做了什么错误。

基本上如果下拉菜单(div标签)是空的，我想隐藏插入符号，否则在按钮上显示插入符号.

请帮帮我!

Answer 1

这可以使用:only-child选择器来完成。

​

.dropdown-menu .caret:only-child{
  display: none;
}

<div class="dropdown-menu">
  <a href="">Lorem</a>
  <span class="caret">v</span>
</div>

​