单击按钮时如何更改插入符号？

【问题标题】：How to change the caret when i click the button?单击按钮时如何更改插入符号？
【发布时间】：2019-09-09 12:45:13
【问题描述】：

您好，我正在使用 bootstrap 4 并设计了带有插入符号的菜单栏。在那我面临两个问题。

1) 当我单击按钮（例如笔记本电脑、手机）时出现下拉菜单，但插入符号没有改变。当我单击插入符号下拉菜单并更改插入符号时。

2) 一旦我点击菜单下拉菜单，箭头就会改变，但是当我从同一个菜单栏中点击另一个菜单时

【问题讨论】：

    标签： javascript jquery html css


    【解决方案1】：

    使用此代码...我已在没有 js 或 jquery 的情况下更新此代码。

     /* Type 3 */
 .nav-link-type-three {
      padding-right: 2.5rem !important;
      padding-left: 1.5rem !important;
      color: white !important;
      text-decoration: none;
  }
  .nav-link-type-three:hover{
    text-decoration: none;
  }
  .nav-link-type-three::after,  li.show .nav-link-type-three::after{
    right: -7px;
    color: #fff;
    font-size: 17px;
    top: 1px;
    font-family: FontAwesome;
    content: "\f0d7";
    position: relative;
  }
  .nav-link-type-three::after,  li.show .nav-link-type-three::after{
    content: "\f0d7";
  }
 li.show .nav-link-type-three::after{
    content: "\f0d8";
    color: #232323;
  }

  .navbar-dark .navbar-nav .show>.nav-link-type-three {
      color: #232323 !important;
      text-decoration: none
  }

  .bg-dark-type-three {
      background-color: #29a4d0 !important;
  }
  
  /* Default image size */
      img {

          max-width: 40px;
          min-height: 40px;
      }

      /* images space */
      .col-md-2 {
          margin-left: 2%;
      }
    <!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <title>Hello, world!</title>

  </head>
  <body>
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark-type-three">
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
          </button>
      <div class="collapse navbar-collapse" id="navbarNavDropdown">
        <ul class="navbar-nav">
          <li class="nav-item dropdown nav-org">
  
            <a class="nav-link-type-three nav-org " type="btn" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown"
              aria-haspopup="true" aria-expanded="false">
              LAPTOP 
            </a>
            <div class="dropdown-menu dropdown-menu-one" aria-labelledby="navbarDropdownMenuLink">
              <div class="row">
                <div class="col-md-2">
                  <a class="dropdown-item dropdown-hover-three-effect" href="#">
                    <div class="text-center">
                      <div>
                        <img src="https://ssl-product-images.www8-hp.com/digmedialib/prodimg/lowres/c05962448.png" alt="">
                      </div>
                      <h6> lg </h6>
                    </div>
                  </a>
                </div>
                <div class="col-md-2">
                  <a class="dropdown-item dropdown-hover-three-effect" href="#">
                    <div class="text-center">
                      <div>
                        <img src="https://images.idgesg.net/images/article/2017/11/bestbuylenovolaptop-100742402-large.jpg"
                          alt="">
                      </div>
                      <h6> sony </h6>
                    </div>
                  </a>
                </div>
                <div class="col-md-2">
                  <a class="dropdown-item dropdown-hover-three-effect" href="#">
                    <div class="text-center">
                      <div>
                        <img src="https://www.lenovo.com/medias/lenovo-laptop-legion-y520-15-front.png?context=bWFzdGVyfGltYWdlc3wyNzI1M3xpbWFnZS9wbmd8aW1hZ2VzL2hiMS9oMDQvOTQxMjY3NTUwMjExMC5wbmd8YjYxMzUxYzUwZDcyNmEyYjJmN2Y1MmQyZTAxYmI4NmY5Yjg4N2Y0ZjIxMWI0YzYyMTM3YTBiZmMyYjZjZGY4Ng"
                          alt="">
                      </div>
                      <h6> acer</h6>
                    </div>
                  </a>
                </div>
                <div class="col-md-2">
                  <a class="dropdown-item dropdown-hover-three-effect" href="#">
                    <div class="text-center">
                      <div>
                        <img src=" https://brain-images-ssl.cdn.dixons.com/6/4/10180946/u_10180946.jpg" alt="">
                      </div>
                      <h6> dell</h6>
                    </div>
                  </a>
                </div>
                <div class="col-md-2">
                  <a class="dropdown-item dropdown-hover-three-effect" href="#">
                    <div class="text-center">
                      <div>
                        <img src="https://img-prod-cms-rt-microsoft-com.akamaized.net/cms/api/am/imageFileData/RE2ygZJ?ver=948e&q=90&m=6&h=623&w=767&b=%23FFFFFFFF&l=f&f=jpg&o=t&aim=true"
                          alt="">
                      </div>
                      <h6> HP </h6>
                    </div>
                  </a>
                </div>
              </div>
            </div>
          </li>
          <li class="nav-item dropdown">
            <a class="nav-link-type-three " type="btn" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown"
              aria-haspopup="true" aria-expanded="false">
              SPEAKERS 
            </a>
  
            <div class="dropdown-menu dropdown-menu-second" aria-labelledby="navbarDropdownMenuLink">
              <div class="row">
                <div class="col-md-2">
                  <a class="dropdown-item dropdown-hover-three-effect" href="#">
                    <div class="text-center">
                      <div>
                        <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ6UE4aUUdaU7m5yO4lG6YvjbAcjRM0sCD5BmzP1PInJ3KcgWwB"
                          alt="">
                      </div>
                      <h6>Mono  </h6>
                    </div>
                  </a>
                </div>
                <div class="col-md-2">
                  <a class="dropdown-item dropdown-hover-three-effect" href="#">
                    <div class="text-center">
                      <div>
                        <img src="https://images-na.ssl-images-amazon.com/images/I/71obbdaLHpL._SX425_.jpg" alt="">
                      </div>
                      <h6>jass </h6>
                    </div>
                  </a>
                </div>
                <div class="col-md-2">
                  <a class="dropdown-item dropdown-hover-three-effect" href="#">
                    <div class="text-center">
                      <div>
                        <img src="https://images.philips.com/is/image/PhilipsConsumer/SPA25A_94-_FP-global-001?$jpglarge$&wid=1250"
                          alt="">
                      </div>
                      <h6>iBall </h6>
                    </div>
                  </a>
                </div>
                <div class="col-md-2">
                  <a class="dropdown-item dropdown-hover-three-effect" href="#">
                    <div class="text-center">
                      <div>
                        <img src="http://www.litheaudio.com/user/products/large/Lithe%20Audio/Bluetooth%20ceiling%20speakers/Bluetooth%20speaker%20images_0034_01565_Lithe%20Audio%20Bluetooth%20IP%20Rated%20Bathroom%20Ceiling%20speaker_Cutout[1].jpg"
                          alt="">
                      </div>
                      <h6>Zebronics </h6>
                    </div>
                  </a>
                </div>
                <div class="col-md-2">
                  <a class="dropdown-item dropdown-hover-three-effect" href="#">
                    <div class="text-center">
                      <div>
                        <img src="https://n3.sdlcdn.com/imgs/e/b/6/QHM602_USB_Mini_Speaker_03332-5c47e.jpg" alt="">
                      </div>
                      <h6>Senizer </h6>
                    </div>
                  </a>
                </div>
  
              </div>
            </div>
          </li>
          <li class="nav-item dropdown">
            <a class="nav-link-type-three" type="btn" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown"
              aria-haspopup="true" aria-expanded="false">
              MOBILES 
            </a>
  
            <div class="dropdown-menu dropdown-menu-third " aria-labelledby="navbarDropdownMenuLink">
              <div class="row">
                <div class="col-md-2">
                  <a class="dropdown-item dropdown-hover-three-effect" href="#">
                    <div class="text-center">
                      <div>
                        <img src="https://www.91-img.com/pictures/97744-v1-apple-iphone-7-mobile-phone-large-1.jpg" alt="">
                      </div>
                      <h6> iphone 7</h6>
                    </div>
                  </a>
                </div>
                <div class="col-md-2">
                  <a class="dropdown-item dropdown-hover-three-effect" href="#">
                    <div class="text-center ">
                      <div>
                        <img src="https://www.gofordigitalindia.com/components/com_djclassifieds/images/item/5/5167_mobile_thb.jpg"
                          alt="">
                      </div>
                      <h6>samsung </h6>
                    </div>
                  </a>
                </div>
                <div class="col-md-2">
                  <a class="dropdown-item dropdown-hover-three-effect" href="#">
                    <div class="text-center">
                      <div>
                        <img src="https://static.toiimg.com/photo/64792032/Motorola-One.jpg" alt="">
                      </div>
                      <h6> Motorola </h6>
                    </div>
                  </a>
                </div>
                <div class="col-md-2">
                  <a class="dropdown-item dropdown-hover-three-effect" href="#">
                    <div class="text-center">
                      <div>
                        <img src="https://www.emibaba.com/wp-content/uploads/2017/09/Apple-iPhone-8-64gb-Red.png" alt="">
                      </div>
                      <h6> iphone 6s</h6>
                    </div>
                  </a>
                </div>
                <div class="col-md-2">
                  <a class="dropdown-item dropdown-hover-three-effect" href="#">
                    <div class="text-center">
                      <div>
                        <img src="http://www.infocusindia.co.in/mobile-phones/img/turbo5.png" alt="">
                      </div>
                      <h6>redmi </h6>
                    </div>
                  </a>
                </div>
              </div>
            </div>
          </li>
          <li class="nav-item dropdown">
            <a class="nav-link-type-three" type="btn" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown"
              aria-haspopup="true" aria-expanded="false">
              CAMARA 
            </a>
  
            <div class="dropdown-menu dropdown-menu-four" aria-labelledby="navbarDropdownMenuLink">
              <a class="dropdown-item" href="#">Action</a>
              <a class="dropdown-item" href="#">Another action</a>
              <a class="dropdown-item" href="#">Something else here</a>
            </div>
          </li>
          <li class="nav-item dropdown">
            <a class="nav-link-type-three" type="btn" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown"
              aria-haspopup="true" aria-expanded="false">
              DESKTOP 
            </a>
  
            <div class="dropdown-menu dropdown-menu-five" aria-labelledby="navbarDropdownMenuLink">
              <a class="dropdown-item" href="#">Action</a>
              <a class="dropdown-item" href="#">Another action</a>
              <a class="dropdown-item" href="#">Something else here</a>
            </div>
          </li>
          <li class="nav-item dropdown">
            <a class="nav-link-type-three" type="btn" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown"
              aria-haspopup="true" aria-expanded="false">
              REFURBISHED 
            </a>
  
            <div class="dropdown-menu dropdown-menu-six" aria-labelledby="navbarDropdownMenuLink">
              <a class="dropdown-item" href="#">Action</a>
              <a class="dropdown-item" href="#">Another action</a>
              <a class="dropdown-item" href="#">Something else here</a>
            </div>
          </li>
          <li class="nav-item dropdown">
            <a class="nav-link-type-three" type="btn" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown"
              aria-haspopup="true" aria-expanded="false">
              ACCESSORIES 
            </a>
  
            <div class="dropdown-menu dropdown-menu-seven" aria-labelledby="navbarDropdownMenuLink">
              <a class="dropdown-item" href="#">Action</a>
              <a class="dropdown-item" href="#">Another action</a>
              <a class="dropdown-item" href="#">Something else here</a>
            </div>
          </li>
          <li class="nav-item dropdown">
            <a class="nav-link-type-three" type="btn" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown"
              aria-haspopup="true" aria-expanded="false">
              MOTHERBOARD 
            </a>
            <div class="dropdown-menu dropdown-menu-eight" aria-labelledby="navbarDropdownMenuLink">
              <a class="dropdown-item" href="#">Action</a>
              <a class="dropdown-item" href="#">Another action</a>
              <a class="dropdown-item" href="#">Something else here</a>
            </div>
          </li>
        </ul>
      </div>
    </nav>
  </div>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
  </body>
</html>

    【讨论】：

      【解决方案2】：

      你很亲密。您必须指向正确的类，然后找到 caret-icon 元素来切换插入符号。

      $(document).ready(function () {
                $('.nav-link-type-three').on('click', function () {
                    if ($(this).find('.caret-icon').hasClass('fa-caret-down')) {
                        $(this).find('.caret-icon').removeClass('fa-caret-down').addClass('fa-caret-up');
                    } else {
                        $(this).find('.caret-icon').removeClass('fa-caret-up').addClass('fa-caret-down');
                    }
                });
            });
        /* Type 3 */
  .nav-link-type-three {
      padding-right: 2.5rem !important;
      padding-left: 1.5rem !important;
      color: white !important;
      text-decoration: none
  }

  .navbar-dark .navbar-nav .show>.nav-link-type-three {
      color: #232323 !important;
      text-decoration: none
  }

  .bg-dark-type-three {
      background-color: #29a4d0 !important;
  }
  
  /* Default image size */
      img {

          max-width: 40px;
          min-height: 40px;
      }

      /* images space */
      .col-md-2 {
          margin-left: 2%;
      }
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div >
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

  <nav class="navbar navbar-expand-lg navbar-dark bg-dark-type-three">
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
    <div class="collapse navbar-collapse" id="navbarNavDropdown">
      <ul class="navbar-nav">
        <li class="nav-item dropdown nav-org">

          <a class="nav-link-type-three nav-org " type="btn" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown"
            aria-haspopup="true" aria-expanded="false">
            LAPTOP <i class="caret-icon fa fa-caret-down"></i>
          </a>
          <div class="dropdown-menu dropdown-menu-one" aria-labelledby="navbarDropdownMenuLink">
            <div class="row">
              <div class="col-md-2">
                <a class="dropdown-item dropdown-hover-three-effect" href="#">
                  <div class="text-center">
                    <div>
                      <img src="https://ssl-product-images.www8-hp.com/digmedialib/prodimg/lowres/c05962448.png" alt="">
                    </div>
                    <h6> lg </h6>
                  </div>
                </a>
              </div>
              <div class="col-md-2">
                <a class="dropdown-item dropdown-hover-three-effect" href="#">
                  <div class="text-center">
                    <div>
                      <img src="https://images.idgesg.net/images/article/2017/11/bestbuylenovolaptop-100742402-large.jpg"
                        alt="">
                    </div>
                    <h6> sony </h6>
                  </div>
                </a>
              </div>
              <div class="col-md-2">
                <a class="dropdown-item dropdown-hover-three-effect" href="#">
                  <div class="text-center">
                    <div>
                      <img src="https://www.lenovo.com/medias/lenovo-laptop-legion-y520-15-front.png?context=bWFzdGVyfGltYWdlc3wyNzI1M3xpbWFnZS9wbmd8aW1hZ2VzL2hiMS9oMDQvOTQxMjY3NTUwMjExMC5wbmd8YjYxMzUxYzUwZDcyNmEyYjJmN2Y1MmQyZTAxYmI4NmY5Yjg4N2Y0ZjIxMWI0YzYyMTM3YTBiZmMyYjZjZGY4Ng"
                        alt="">
                    </div>
                    <h6> acer</h6>
                  </div>
                </a>
              </div>
              <div class="col-md-2">
                <a class="dropdown-item dropdown-hover-three-effect" href="#">
                  <div class="text-center">
                    <div>
                      <img src=" https://brain-images-ssl.cdn.dixons.com/6/4/10180946/u_10180946.jpg" alt="">
                    </div>
                    <h6> dell</h6>
                  </div>
                </a>
              </div>
              <div class="col-md-2">
                <a class="dropdown-item dropdown-hover-three-effect" href="#">
                  <div class="text-center">
                    <div>
                      <img src="https://img-prod-cms-rt-microsoft-com.akamaized.net/cms/api/am/imageFileData/RE2ygZJ?ver=948e&q=90&m=6&h=623&w=767&b=%23FFFFFFFF&l=f&f=jpg&o=t&aim=true"
                        alt="">
                    </div>
                    <h6> HP </h6>
                  </div>
                </a>
              </div>
            </div>
          </div>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link-type-three " type="btn" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown"
            aria-haspopup="true" aria-expanded="false">
            SPEAKERS <i class="caret-icon fa fa-caret-down"></i>
          </a>

          <div class="dropdown-menu dropdown-menu-second" aria-labelledby="navbarDropdownMenuLink">
            <div class="row">
              <div class="col-md-2">
                <a class="dropdown-item dropdown-hover-three-effect" href="#">
                  <div class="text-center">
                    <div>
                      <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ6UE4aUUdaU7m5yO4lG6YvjbAcjRM0sCD5BmzP1PInJ3KcgWwB"
                        alt="">
                    </div>
                    <h6>Mono  </h6>
                  </div>
                </a>
              </div>
              <div class="col-md-2">
                <a class="dropdown-item dropdown-hover-three-effect" href="#">
                  <div class="text-center">
                    <div>
                      <img src="https://images-na.ssl-images-amazon.com/images/I/71obbdaLHpL._SX425_.jpg" alt="">
                    </div>
                    <h6>jass </h6>
                  </div>
                </a>
              </div>
              <div class="col-md-2">
                <a class="dropdown-item dropdown-hover-three-effect" href="#">
                  <div class="text-center">
                    <div>
                      <img src="https://images.philips.com/is/image/PhilipsConsumer/SPA25A_94-_FP-global-001?$jpglarge$&wid=1250"
                        alt="">
                    </div>
                    <h6>iBall </h6>
                  </div>
                </a>
              </div>
              <div class="col-md-2">
                <a class="dropdown-item dropdown-hover-three-effect" href="#">
                  <div class="text-center">
                    <div>
                      <img src="http://www.litheaudio.com/user/products/large/Lithe%20Audio/Bluetooth%20ceiling%20speakers/Bluetooth%20speaker%20images_0034_01565_Lithe%20Audio%20Bluetooth%20IP%20Rated%20Bathroom%20Ceiling%20speaker_Cutout[1].jpg"
                        alt="">
                    </div>
                    <h6>Zebronics </h6>
                  </div>
                </a>
              </div>
              <div class="col-md-2">
                <a class="dropdown-item dropdown-hover-three-effect" href="#">
                  <div class="text-center">
                    <div>
                      <img src="https://n3.sdlcdn.com/imgs/e/b/6/QHM602_USB_Mini_Speaker_03332-5c47e.jpg" alt="">
                    </div>
                    <h6>Senizer </h6>
                  </div>
                </a>
              </div>

            </div>
          </div>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link-type-three" type="btn" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown"
            aria-haspopup="true" aria-expanded="false">
            MOBILES <i class="caret-icon fa fa-caret-down"></i>
          </a>

          <div class="dropdown-menu dropdown-menu-third " aria-labelledby="navbarDropdownMenuLink">
            <div class="row">
              <div class="col-md-2">
                <a class="dropdown-item dropdown-hover-three-effect" href="#">
                  <div class="text-center">
                    <div>
                      <img src="https://www.91-img.com/pictures/97744-v1-apple-iphone-7-mobile-phone-large-1.jpg" alt="">
                    </div>
                    <h6> iphone 7</h6>
                  </div>
                </a>
              </div>
              <div class="col-md-2">
                <a class="dropdown-item dropdown-hover-three-effect" href="#">
                  <div class="text-center ">
                    <div>
                      <img src="https://www.gofordigitalindia.com/components/com_djclassifieds/images/item/5/5167_mobile_thb.jpg"
                        alt="">
                    </div>
                    <h6>samsung </h6>
                  </div>
                </a>
              </div>
              <div class="col-md-2">
                <a class="dropdown-item dropdown-hover-three-effect" href="#">
                  <div class="text-center">
                    <div>
                      <img src="https://static.toiimg.com/photo/64792032/Motorola-One.jpg" alt="">
                    </div>
                    <h6> Motorola </h6>
                  </div>
                </a>
              </div>
              <div class="col-md-2">
                <a class="dropdown-item dropdown-hover-three-effect" href="#">
                  <div class="text-center">
                    <div>
                      <img src="https://www.emibaba.com/wp-content/uploads/2017/09/Apple-iPhone-8-64gb-Red.png" alt="">
                    </div>
                    <h6> iphone 6s</h6>
                  </div>
                </a>
              </div>
              <div class="col-md-2">
                <a class="dropdown-item dropdown-hover-three-effect" href="#">
                  <div class="text-center">
                    <div>
                      <img src="http://www.infocusindia.co.in/mobile-phones/img/turbo5.png" alt="">
                    </div>
                    <h6>redmi </h6>
                  </div>
                </a>
              </div>
            </div>
          </div>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link-type-three" type="btn" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown"
            aria-haspopup="true" aria-expanded="false">
            CAMARA <i class="caret-icon fa fa-caret-down"></i>
          </a>

          <div class="dropdown-menu dropdown-menu-four" aria-labelledby="navbarDropdownMenuLink">
            <a class="dropdown-item" href="#">Action</a>
            <a class="dropdown-item" href="#">Another action</a>
            <a class="dropdown-item" href="#">Something else here</a>
          </div>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link-type-three" type="btn" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown"
            aria-haspopup="true" aria-expanded="false">
            DESKTOP <i class="caret-icon fa fa-caret-down"></i>
          </a>

          <div class="dropdown-menu dropdown-menu-five" aria-labelledby="navbarDropdownMenuLink">
            <a class="dropdown-item" href="#">Action</a>
            <a class="dropdown-item" href="#">Another action</a>
            <a class="dropdown-item" href="#">Something else here</a>
          </div>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link-type-three" type="btn" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown"
            aria-haspopup="true" aria-expanded="false">
            REFURBISHED <i class="caret-icon fa fa-caret-down"></i>
          </a>

          <div class="dropdown-menu dropdown-menu-six" aria-labelledby="navbarDropdownMenuLink">
            <a class="dropdown-item" href="#">Action</a>
            <a class="dropdown-item" href="#">Another action</a>
            <a class="dropdown-item" href="#">Something else here</a>
          </div>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link-type-three" type="btn" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown"
            aria-haspopup="true" aria-expanded="false">
            ACCESSORIES <i class="caret-icon fa fa-caret-down"></i>
          </a>

          <div class="dropdown-menu dropdown-menu-seven" aria-labelledby="navbarDropdownMenuLink">
            <a class="dropdown-item" href="#">Action</a>
            <a class="dropdown-item" href="#">Another action</a>
            <a class="dropdown-item" href="#">Something else here</a>
          </div>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link-type-three" type="btn" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown"
            aria-haspopup="true" aria-expanded="false">
            MOTHERBOARD <i class="caret-icon fa fa-caret-down"></i>
          </a>
          <div class="dropdown-menu dropdown-menu-eight" aria-labelledby="navbarDropdownMenuLink">
            <a class="dropdown-item" href="#">Action</a>
            <a class="dropdown-item" href="#">Another action</a>
            <a class="dropdown-item" href="#">Something else here</a>
          </div>
        </li>
      </ul>
    </div>
  </nav>
</div>

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

      【讨论】：

        【解决方案3】：

        问题出在 jQuery 的第二行。

        $('.fa-caret-down').on('click', function () {}

        您应该定位整个按钮，而不是定位.fa-caret-down（图标使用的一个类）。

        $('button').on('click', function () {}

        注意：我写了button，但您需要针对您的情况指定特定标签nav-link。

        【讨论】：

          猜你喜欢
          • 2021-03-19
          • 1970-01-01
          • 1970-01-01
          • 2015-09-15
          • 2018-04-13
          • 2018-02-28
          • 1970-01-01
          • 2018-11-03
          • 1970-01-01
          相关资源
          最近更新 更多
          热门标签
          Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode