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

Question

您好，我正在使用Bootstrap 4和带插入符号的设计菜单栏。因此，我面临两个问题。

1）当我单击按钮（例如LAPTOP，MObile）下拉菜单时，但插入符号未更改。当我单击插入符号下拉菜单时，插入符号更改。

2）一旦我单击菜单下拉菜单，就会出现箭头更改，但是当我从同一菜单栏中单击另一个菜单时

$(document).ready(function () {
                $('.fa-caret-down').on('click', function () {
                    if ($(this).hasClass('fa-caret-down')) {
                        $(this).removeClass('fa-caret-down').addClass('fa-caret-up');
                    } else {
                        $(this).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>

插入符号未更改。

Answer 1

你很近。您必须指向适当的类，然后找到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>

Answer 2

问题出在jQuery的第二行。

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

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

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

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

Answer 3

使用此代码...我已经在没有js或jquery的情况下进行了udpate。

 /* 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>