根据是否存在下拉菜单，在bootstrap4下拉列表中显示或隐藏插入符号图标 [英] Show or hide caret icon on bootstrap4 dropdown based on dropdown menu present or not

问题描述

我想显示或隐藏基于菜单项的插入符号是否存在。如果菜单项目显示插入符号图标，则将其隐藏。我正在使用bootstrap4，在我的情况下，下拉菜单项将动态生成。

I want to show or hide caret icons based on menu items is present or not. if menu items present show caret icon else hide it. i am using bootstrap4 and in my case dropdown menu items will by dynamically generated.

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

上面的代码删除插入符号但是如何根据下拉列表中的菜单显示/隐藏它？

Above code removes caret symbol but how to show/hide it based on the menu in dropdown present or not ?

.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 .dropdown-item'）中没有项目，请使用 .hide（） .length == 0

Use .hide() if no items inside $('.dropdown-menu .dropdown-item').length==0

$( document ).ready(function() {
  if($('.dropdown-menu .dropdown-item').length==0 )
  {
   $('.fas.fa-shopping-cart').hide();
  }
});

<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>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">



<div class="dropdown">
    <button type="button" class="btn dropdown-toggle" data-toggle="dropdown">list<i class="fas fa-shopping-cart"></i>
 
    </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使用 only-child：

Only css use only-child:

.dropdown button:only-child .fas.fa-shopping-cart{
display:none;
}

    <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>
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">



    <div class="dropdown">
        <button type="button" class="btn dropdown-toggle" data-toggle="dropdown">list<i class="fas fa-shopping-cart"></i>
     
        </button>
    </div>

这篇关于根据是否存在下拉菜单，在bootstrap4下拉列表中显示或隐藏插入符号图标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！