Question

当下拉菜单被激活时如何停止向上滑动。单击子菜单时，单击下拉菜单，而不是我需要停止向上滑动并保持子菜单保持活动。有人可以帮我解决此问题吗？这是该代码的HTML和js代码

<div class="sidebar-menu">
        <ul>
         <li <?php if($this->uri->segment(1)=="cc"){echo 'class="active"';}?> >
             <a href="#">Create Contract</a></li>

          <li class="sidebar-dropdown">
            <a href="#">
             Create Master Data
            </a>
            <div class="sidebar-submenu">
              <ul id="submenu" class=" treeview-menu nav navbar-nav side-nav">
                <li>
                  <a href="#" <?php if($this->uri->segment(2)=="city"){echo 'class="active"';}?> >City</a>
                </li>
                <li>
                  <a href="#" <?php if($this->uri->segment(2)=="business"){echo 'class="active"';}?> >Line of business</a>
                </li>

              </ul>
            </div>
         </li>    

 $(".sidebar-dropdown > a").click(function(e) {
  $(".sidebar-submenu").slideUp(200);

  if (
    $(this)
      .parent()
      .hasClass("active")
  ) {
    $(".sidebar-dropdown").removeClass("active");
    $(this)
      .parent()
      .removeClass("active");
  } else {
    $(".sidebar-dropdown").addClass("active");

    $(this)
      .next(".sidebar-submenu")
      .slideDown(200);
    $(this)
      .parent()
      .addClass("active");
  }
});

Answer 1

这是您要找的东西吗？ Navbar with sub-menu

(function($) {
  $(document).ready(function() {
    $('ul.dropdown-menu [data-toggle=dropdown]').on('click', function(event) {
      event.preventDefault();
      event.stopPropagation();
      $(this).parent().siblings().removeClass('open');
      $(this).parent().toggleClass('open');
    });
  });
})(jQuery);

.dropdown-submenu {
  position: relative;
}

.dropdown-submenu>.dropdown-menu {
  top: 0;
  left: 100%;
  margin-top: -6px;
  margin-left: -1px;
  -webkit-border-radius: 0 6px 6px 6px;
  -moz-border-radius: 0 6px 6px 6px;
  border-radius: 0 6px 6px 6px;
}

.dropdown-submenu>a:after {
  display: block;
  content: " ";
  float: right;
  width: 0;
  height: 0;
  border-color: transparent;
  border-style: solid;
  border-width: 5px 0 5px 5px;
  border-left-color: #cccccc;
  margin-top: 5px;
  margin-right: -10px;
}

.dropdown-submenu:hover>a:after {
  border-left-color: #555;
}

.dropdown-submenu.pull-left {
  float: none;
}

.dropdown-submenu.pull-left>.dropdown-menu {
  left: -100%;
  margin-left: 10px;
  -webkit-border-radius: 6px 0 6px 6px;
  -moz-border-radius: 6px 0 6px 6px;
  border-radius: 6px 0 6px 6px;
}


/*
@media (min-width: 768px) { 
}
@media (min-width: 992px) { 
}
@media (min-width: 1200px) { 
}
*/

<!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>

</head>

<body>
  <div class="container pen">
    <div class="row">
      <div class="col-sm-12">

        <nav class="navbar navbar-default" role="navigation">
          <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse-1">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
            <a class="navbar-brand" href="#" target="_blank">Brand</a>
          </div>

          <div class="collapse navbar-collapse" id="navbar-collapse-1">
            <ul class="nav navbar-nav">
              <li class="active"><a href="#">Active Link</a></li>
              <li><a >Link</a></li>
              <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
                <ul class="dropdown-menu">
                  <li><a href="#">Dropdown 1</a></li>
                  <li><a>Dropdown 2</a></li>
                  <li><a href="#">Dropdown 3</a></li>
                  <li class="divider"></li>
                  <li class="dropdown dropdown-submenu"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown 4</a>
                    <ul class="dropdown-menu">
                      <li><a href="#">Dropdown Submenu 4.1</a></li>
                      <li><a href="#">Dropdown Submenu 4.2</a></li>
                      <li><a href="#">Dropdown Submenu 4.3</a></li>
                      <li><a href="#">Dropdown Submenu 4.4</a></li>
                    </ul>
                  </li>
                  <li class="dropdown dropdown-submenu">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown 5</a>
                    <ul class="dropdown-menu">
                      <li><a href="#">Dropdown Submenu 5.1</a></li>
                      <li><a href="#">Dropdown Submenu 5.2</a></li>
                      <li><a href="#">Dropdown Submenu 5.3</a></li>
                      <li class="divider"></li>
                      <li class="dropdown dropdown-submenu"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown Submenu 5.4</a>
                        <ul class="dropdown-menu">
                          <li><a href="#">Dropdown Submenu 5.4.1</a></li>
                          <li><a href="#">Dropdown Submenu 5.4.2</a></li>
                          <li class="divider"></li>
                          <li class="dropdown dropdown-submenu"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown Submenu 5.4.3</a>
                            <ul class="dropdown-menu">
                              <li><a href="#">Dropdown Submenu 5.4.3.1</a></li>
                              <li><a href="#">Dropdown Submenu 5.4.3.2</a></li>
                              <li><a href="#">Dropdown Submenu 5.4.3.3</a></li>
                              <li><a href="#">Dropdown Submenu 5.4.3.4</a></li>
                            </ul>
                          </li>
                          <li class="dropdown dropdown-submenu"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown Submenu 5.4.4</a>
                            <ul class="dropdown-menu">
                              <li><a href="#">Dropdown Submenu 5.4.4.1</a></li>
                              <li><a href="#">Dropdown Submenu 5.4.4.2</a></li>
                              <li><a href="#">Dropdown Submenu 5.4.4.3</a></li>
                              <li><a href="#">Dropdown Submenu 5.4.4.4</a></li>
                            </ul>
                          </li>
                        </ul>
                      </li>
                    </ul>
                  </li>
                </ul>
              </li>
              <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
                <ul class="dropdown-menu">
                  <li><a href="#">Dropdown Link 1</a></li>
                  <li><a href="#">Dropdown Link 2</a></li>
                  <li><a href="#">Dropdown Link 3</a></li>
                  <li class="dropdown dropdown-submenu">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown Link 4</a>
                    <ul class="dropdown-menu">
                      <li><a href="#">Dropdown Submenu Link 4.1</a></li>
                      <li><a href="#">Dropdown Submenu Link 4.2</a></li>
                      <li><a href="#">Dropdown Submenu Link 4.3</a></li>
                      <li><a href="#">Dropdown Submenu Link 4.4</a></li>
                    </ul>
                  </li>
                  <li class="dropdown dropdown-submenu">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown Link 5</a>
                    <ul class="dropdown-menu">
                      <li><a href="#">Dropdown Submenu Link 5.1</a></li>
                      <li><a href="#">Dropdown Submenu Link 5.2</a></li>
                      <li><a href="#">Dropdown Submenu Link 5.3</a></li>
                      <li class="divider"></li>
                      <li class="dropdown dropdown-submenu">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown Submenu Link 5.4</a>
                        <ul class="dropdown-menu">
                          <li><a href="#">Dropdown Submenu Link 5.4.1</a></li>
                          <li><a href="#">Dropdown Submenu Link 5.4.2</a></li>
                          <li class="divider"></li>
                          <li class="dropdown dropdown-submenu">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown Submenu Link 5.4.3</a>
                            <ul class="dropdown-menu">
                              <li><a href="#">Dropdown Submenu Link 5.4.3.1</a></li>
                              <li><a href="#">Dropdown Submenu Link 5.4.3.2</a></li>
                              <li><a href="#">Dropdown Submenu Link 5.4.3.3</a></li>
                              <li><a href="#">Dropdown Submenu Link 5.4.3.4</a></li>
                            </ul>
                          </li>
                          <li class="dropdown dropdown-submenu"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown Submenu Link 5.4.4</a>
                            <ul class="dropdown-menu">
                              <li><a href="#">Dropdown Submenu Link 5.4.4.1</a></li>
                              <li><a href="#">Dropdown Submenu Link 5.4.4.2</a></li>
                              <li><a href="#">Dropdown Submenu Link 5.4.4.3</a></li>
                              <li><a href="#">Dropdown Submenu Link 5.4.4.4</a></li>
                            </ul>
                          </li>
                        </ul>
                      </li>
                    </ul>
                  </li>
                </ul>
              </li>
            </ul>
          </div>
          <!-- /.navbar-collapse -->
        </nav>

      </div>
    </div>
  </div>
</body>

</html>

Answer 2

好，我衷心希望我终于理解你的问题。

基本上，如果子菜单（a）中的任何一个处于活动状态，则可以将其标记为活动菜单。然后，在向上滑动子菜单之前，先检查其子菜单的 active 。

HIH

$(".sidebar-dropdown > a").click(function(e) {
    let parent = $(this).parent();
    let submenu = $(this).next(".sidebar-submenu");
    
    if(!submenu.hasClass('active'))
      if(parent.hasClass('submenu-shown')){
        $(this)
        .next(".sidebar-submenu")
        .slideUp(200, function(){
          parent.removeClass('submenu-shown')
        });
      }else{
        $(this)
        .next(".sidebar-submenu")
        .slideDown(200, function(){
          parent.addClass('submenu-shown')
        });  
      }
});

$('.sidebar-submenu').on('click', 'a', (e) => {
  let submenu = $(e.delegateTarget);
  let a = $(e.currentTarget);
  a.toggleClass('active');
  
  if(submenu.find('a.active').length === 0)
    submenu.removeClass('active');
  else submenu.addClass('active');
  
});

.sidebar-submenu{
  display: none
}

.sidebar-submenu li a.active{
  background: red
}

.sidebar-dropdown.active .sidebar-submenu{
  display: block
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="sidebar-menu">
        <ul>
         <li >
             <a href="#">Create Contract</a></li>

          <li class="sidebar-dropdown">
            <a href="#">
             Create Master Data
            </a>
            <div class="sidebar-submenu">
              <ul id="submenu1" class="treeview-menu nav navbar-nav side-nav">
                <li>
                  <a href="#" >City</a>
                </li>
                <li>
                  <a href="#" >Line of business</a>
                </li>

              </ul>
            </div>
         </li>
         <li class="sidebar-dropdown">
            <a href="#">
             Create Master Data 2
            </a>
            <div class="sidebar-submenu">
              <ul id="submenu2" class="treeview-menu nav navbar-nav side-nav">
                <li>
                  <a href="#" >City</a>
                </li>
                <li>
                  <a href="#" >Line of business</a>
                </li>

              </ul>
            </div>
         </li>

下拉菜单中的子菜单处于活动状态时如何停止滑动？

2 个答案: