Question

在这里寻求专家的帮助！我设法旋转了BS4上的原始下拉式插入符号。但是，我在旋转子菜单插入符号时遇到问题，请问有人可以批评我可能做错了什么吗？我希望避免将FontAwesome用于此目的，并尽可能将其保留在CSS和Bootstrap4中。

谢谢，非常感谢！

<nav class="navbar navbar-expand-lg navbar-custom py-1" style="background-color:#0082bb;">
  <a class="navbar-brand" href="#" base target="parent">Brand</a>
  <button class="navbar-toggler update-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerToggle" aria-controls="navbarTogglerToggle" aria-expanded="true" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>

  </button>
  <div class="collapse show navbar-collapse" id="navbarTogglerToggle">

    <ul class="navbar-nav mr-auto mt-2 mt-lg-0">
      <li class="nav-item active">
        <a class="nav-link" href="#" base target="parent">Home <span class="sr-only">(current)</span></a>
      </li>
    <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Resources
        </a>
        <ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
          <li><a class="dropdown-item" href="#" base target="parent">Action</a></li>
          <li><a class="dropdown-item" href="#" base target="parent">Another action</a></li>
          <li class="dropdown-submenu"><a class="dropdown-item dropdown-toggle" href="#">Submenu</a>
            <ul class="dropdown-menu">
              <li><a class="dropdown-item" href="#" base target="parent">Submenu action</a></li>
              <li><a class="dropdown-item" href="#" base target="parent">Another submenu action</a></li>

.dropdown-toggle[aria-expanded="true"]:after {
  transform: rotate(-180deg);
}


.dropdown-toggle:after {
  transition: 0.2s;
}

.dropdown-submenu {
  position: relative;
}

.dropdown-submenu a::after {
  transform: rotate(-90deg);
  position: absolute;
  right: 6px;
  top: .8em;
}

Answer 1

要解决此问题，我们需要单击.dropdown-submenu .dropdown-toggle并添加/删除一个类，该类将插入符号的方向从左到下和向后更改。完整的代码如下：

$('.dropdown-menu a.dropdown-toggle').on('click', function(e) {
  if (!$(this).next().hasClass('show')) {
    $(this).parents('.dropdown-menu').first().find('.show').removeClass("show");
  }
  var $subMenu = $(this).next(".dropdown-menu");
  $subMenu.toggleClass('show');


  $(this).parents('li.nav-item.dropdown.show').on('hidden.bs.dropdown', function(e) {
    $('.dropdown-submenu .show').removeClass("show");
  });

  return false;
});

/* for TOP LEVEL MENU */
$('.dropdown>.dropdown-toggle').click(function() {
  if ($(this).hasClass('caretDown')) {
    $(this).removeClass('caretDown');
  } else {
    $(this).addClass('caretDown');
  }
});

/* for SUB MENUS */
$('.dropdown-submenu>.dropdown-toggle').click(function() {
  if ($(this).hasClass('caretDown')) {
    $(this).removeClass('caretDown');
  } else {
    $(this).addClass('caretDown');
  }
});

.dropdown-submenu {
  position: relative;
}

.dropdown-submenu a::after {
  transform: rotate(-90deg);
  position: absolute;
  right: 6px;
  top: .8em;
}

.dropdown-submenu .dropdown-menu {
  top: 0;
  left: 100%;
  margin-left: .1rem;
  margin-right: .1rem;
}

#navbarDropdownMenuLink::after {
  transform: rotate(-90deg);
}

a.caretDown::after {
  transform: rotate(0deg) !important;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <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 active">
        <a class="nav-link" href="#">Home
            <span class="sr-only">(current)</span>
          </a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            Dropdown link
          </a>
        <ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
          <li>
            <a class="dropdown-item" href="#">Action</a>
          </li>
          <li>
            <a class="dropdown-item" href="#">Another action</a>
          </li>
          <li class="dropdown-submenu">
            <a class="dropdown-item dropdown-toggle" href="#">Submenu</a>
            <ul class="dropdown-menu">
              <li>
                <a class="dropdown-item" href="#">Submenu action</a>
              </li>
              <li>
                <a class="dropdown-item" href="#">Another submenu action</a>
              </li>


              <li class="dropdown-submenu">
                <a class="dropdown-item dropdown-toggle" href="#">Subsubmenu</a>
                <ul class="dropdown-menu">
                  <li>
                    <a class="dropdown-item" href="#">Subsubmenu action</a>
                  </li>
                  <li>
                    <a class="dropdown-item" href="#">Another subsubmenu action</a>
                  </li>
                </ul>
              </li>
              <li class="dropdown-submenu">
                <a class="dropdown-item dropdown-toggle" href="#">Second subsubmenu</a>
                <ul class="dropdown-menu">
                  <li>
                    <a class="dropdown-item" href="#">Subsubmenu action</a>
                  </li>
                  <li>
                    <a class="dropdown-item" href="#">Another subsubmenu action</a>
                  </li>
                </ul>
              </li>

            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </div>
</nav>

更新：顶部导航链接插入符的切换以前未完成，在发问者指向指针后得到纠正

旋转Twitter Bootstrap4导航栏菜单/子菜单

1 个答案: