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>

如您所见，我在下拉菜单中评论了锚标签。所以现在dropdown-menu标签为空。所以我只想使用纯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>

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

1 个答案: