在下拉菜单和可折叠菜单之间进行引导切换

我有一个使用本机引导类的可折叠边栏，在初始状态下，它有可折叠的子菜单项，当边栏折叠时，我希望子菜单切换到下拉子菜单，它第一次工作，但一旦切换到下拉菜单，popper仍然将样式应用到菜单，您可以在下面的示例代码中看到它。有没有办法从popper click事件中注销菜单项

(function($) {

    "use strict";

    var fullHeight = function() {
        $('.js-fullheight').css('height', $(window).height());
        $(window).resize(function(){
            $('.js-fullheight').css('height', $(window).height());
        });

    };

    fullHeight();

    $('#sidebarCollapse').on('click', function () {
      $('#sidebar').toggleClass('active');

      if ( $("#sidebar").hasClass('active'))
      {

          $( "#homeSubmenu" ).attr( {
              'class':"dropdown-menu",
              "aria-labelledby":"homemenuLink",

          });
          $( "#homemenuLink" ).attr( "data-bs-toggle","dropdown" );
          $( "#homemenuLink" ).removeAttr( "aria-controls" );

      }
      else
      {

          $( "#homeSubmenu" ).attr( 'class','list-unstyled collapse');
          $( "#homeSubmenu" ).removeAttr('aria-labelledby')
          $( "#homeSubmenu" ).removeAttr('style')
          $( "#homemenuLink" ).attr( "data-bs-toggle","collapse" );
          $( "#homemenuLink" ).attr( "aria-controls","homeSubmenu" );

      }

  });

})(jQuery);

body {
    font-family: "Poppins", Arial, sans-serif;
    font-size: 14px;
    line-height: 1.8;
    font-weight: normal;
    background: #fafafa;
    color: gray; }

  a {
    -webkit-transition: .3s all ease;
    -o-transition: .3s all ease;
    text-decoration: none !important;
    transition: .3s all ease;
    color: #f8b739; }
    a:hover, a:focus {
      outline: none !important;
      -webkit-box-shadow: none;
      box-shadow: none; }

  button {
    -webkit-transition: .3s all ease;
    -o-transition: .3s all ease;
    transition: .3s all ease; }
    button:hover, button:focus {
      text-decoration: none !important;
      outline: none !important;
      -webkit-box-shadow: none !important;
      box-shadow: none !important; }

  h1, h2, h3, h4, h5,
  .h1, .h2, .h3, .h4, .h5 {
    line-height: 1.5;
    font-weight: 400;
    font-family: "Poppins", Arial, sans-serif;
    color: #000; }

  .ftco-section {
    padding: 7em 0; }

  .ftco-no-pt {
    padding-top: 0; }

  .ftco-no-pb {
    padding-bottom: 0; }

  .heading-section {
    font-size: 28px;
    color: #000; }
    .heading-section small {
      font-size: 18px; }

  .img {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center; }

  .navbar {
    padding: 15px 10px;
    background: #fff;
    border: none;
    border-radius: 0;
    margin-bottom: 40px;
    -webkit-box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
    box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1); }

  .navbar-btn {
    -webkit-box-shadow: none;
    box-shadow: none;
    outline: none !important;
    border: none; }

  .line {
    width: 100%;
    height: 1px;
    border-bottom: 1px dashed #ddd;
    margin: 40px 0; }

  .wrapper {
    width: 100%; }

  #sidebar {
    min-width: 300px;
    max-width: 300px;
    background: #1d1919;
    color: #fff;
    -webkit-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
  }

  #sidebar.active {
    /*margin-left: -300px;*/
    min-width: 50px;
    max-width: 50px;
  }

  #sidebar .logo {
      display: block;
      width: 120px;
      height: 120px;
      margin: 0 auto;
  }
  #sidebar .logo span {
        display: block;
  }

  #sidebar ul.components {
      padding: 0;
  }

  #sidebar ul li {
      font-size: 16px;
  }

 #sidebar.active ul li {
      display: block;
  }

  #sidebar.active ul li .textmenu {
      display: none;
  }

# sidebar .dropdown-menu {

    background: #1d1919;
    color: #fff;

}
  #sidebar.active ul li i {
    margin-right: auto;
    margin-left: auto;
    font-size: 16px;
}

  #sidebar ul li > ul {
        margin-left: 10px;
  }

  #sidebar ul li > ul li {
         font-size: 14px;
  }

  #sidebar ul li a {
        padding: 10px 0;
        display: block;
        color: rgba(255, 255, 255, 0.8);
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }

  #sidebar ul li a:hover {
          color: #f8b739;
  }

  #sidebar ul li.active > a {
        background: transparent;
        color: #f8b739;
  }

  @media (max-width: 991.98px) {
    #sidebar {
        margin-left: -300px;
     }
    #sidebar.active {
          margin-left: 0
    }
  }

  a[data-bs-toggle="collapse"] {
    position: relative; }

  .dropdown-toggle::after {
    display: block;
    position: absolute;
    top: 50%;
    right: 0;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
     transition: all 0.5s;
  }

  .dropdown-toggle.collapsed::after {
      transform: rotate(180deg);

  }

  @media (max-width: 991.98px) {
    #sidebarCollapse span {
      display: none; } }

  #content {
    width: 100%;
    padding: 0;
    min-height: 100vh;
    -webkit-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s; }

  .btn.btn-primary {
    background: #f8b739;
    border-color: #f8b739; }
    .btn.btn-primary:hover, .btn.btn-primary:focus {
      background: #f8b739 !important;
      border-color: #f8b739 !important; }

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper d-flex align-items-stretch">
    <nav id="sidebar" class="dropup">
        <div class="p-4 pt-5">

            <ul class="list-unstyled components mb-5">
                <li id="dropdownMenu1">
                    <a href="#homeSubmenu" role="button" data-bs-toggle="collapse" id="homemenuLink"
                        class="dropdown-toggle" aria-expanded="false">
                        <i class="fa fa-home me-2"></i> <span class="textmenu">Home</span>
                    </a>

                    <ul class="collapse list-unstyled" id="homeSubmenu">
                        <li>
                            <a href="#">Home 1</a>
                        </li>
                        <li>
                            <a href="#">Home 2</a>
                        </li>
                        <li>
                            <a href="#">Home 3</a>
                        </li>
                    </ul>
                </li>

                <li>
                    <a href="#"> <i class="fa fa-id-card me-2"></i> <span class="textmenu"> Contact</span></a>
                </li>
            </ul>

        </div>
    </nav>

    <!-- Page Content  -->
    <div id="content">
        <!-- class="p-4 p-md-5"-->

        <nav class="navbar navbar-expand-lg navbar-light bg-light">
            <div class="container-fluid">
                <button type="button" id="sidebarCollapse" class="btn btn-primary">
                    <i class="fa fa-bars"></i>
                    <span class="sr-only">Toggle Menu</span>
                </button>
                <button class="btn btn-dark d-inline-block d-lg-none ms-auto" type="button" data-toggle="collapse"
                    data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false"
                    aria-label="Toggle navigation">
                    <i class="fa fa-bars"></i>
                </button>

                <div class="collapse navbar-collapse" id="navbarSupportedContent">
                    <ul class="nav navbar-nav ms-auto">
                        <a class="nav-link" href="#">Home</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">About</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">Portfolio</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">Contact</a>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>
        <div class="content p-4">
            <h2 class="mb-4">Sidebar #01</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et
                dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
                ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
                fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
                deserunt mollit anim id est laborum.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et
                dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
                ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
                fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
                deserunt mollit anim id est laborum.</p>
        </div>
    </div>

</div>

编辑：我注意到当栏被展开并且下拉菜单可见时，它会工作

在下拉菜单和可折叠菜单之间进行引导切换

暂无答案！

相关问题

热门标签

最新问答