Question

我有一个下拉菜单，可以使用bootstrap 4 alpha。但是它没有在bootstrap 4 beta中工作。

当我点击第二个下拉菜单时，它会自动关闭。但之前工作正常。

我尝试在下拉列表中使用ul下拉列表更改div，但这在测试版中没有用，但在alpha版本中工作正常。有人可以帮我这个吗？

这是下拉链接代码结构：

<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">
        <a class="nav-link" href="#">Features</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Pricing</a>
      </li>
      <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="https://bootstrapthemes.co" 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><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><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><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>

的Javascript

$( document ).ready( function () {
    $( '.navbar a.dropdown-toggle' ).on( 'click', function ( e ) {
        var $el = $( this );
        var $parent = $( this ).offsetParent( ".dropdown-menu" );
        $( this ).parent( "li" ).toggleClass( 'show' );

        if ( !$parent.parent().hasClass( 'navbar-nav' ) ) {
            $el.next().css( { "top": $el[0].offsetTop, "left": $parent.outerWidth() - 4 } );
        }
        $( '.navbar-nav li.show' ).not( $( this ).parents( "li" ) ).removeClass( "show" );
        return true;
    } );
});

CSS

.navbar-light .navbar-nav .nav-link {
    color: rgb(64, 64, 64);
}
.btco-menu li > a {
    padding: 10px 15px;
    color: #000;

}

.btco-menu .active a:focus,
.btco-menu li a:focus ,
.navbar > .show > a:focus{
    background: transparent;
    outline: 0;
}


.dropdown-menu .show > .dropdown-toggle::after{
    transform: rotate(-90deg);
}

Bootstrap 4多下拉导航切换问题

0 个答案: