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

Question

如果下拉菜单为空，我想在引导下拉菜单中隐藏插入符号图标。我正在使用引导程序 4。下面的 sn-p 清楚地解释了问题陈述。我正在寻找纯 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>