Jquery 导航栏 [tablet/mobile-view]

Jquery Navigation bar [tablet/mobile-view]

我是 jquery 的新手。当我在移动视图上打开和关闭导航栏时，slideToggle 流被后代 "ul" 弄乱了。当我关闭导航栏时，jquery 将后代 ul 显示更改为块 (display:block)，这导致幻灯片流混乱。作为 jquery 的新手，我不知道如何解决这个问题。请帮助我提供任何参考或纠正我做错的地方。

    $(document).ready(function(){
     $('.my-mobile-menu').click(function(){
      $('.my-header-navmenu nav ul').slideToggle(250,'swing');
     });
    
     $('.my-pa-service').on('click',function(e){
      $('.my-ul-service').slideToggle('swing');
     });
    
    });

    body{
     box-sizing: border-box;
     padding: 0;
     margin: 0;
     width: 100%;
    }
    
    ul{
     margin: 0px;
     padding: 0px;
    }
    
    li{
     list-style-type: none;
    
    }
    
    a{
     text-decoration: none;
     margin: 0;
     padding: 0;
    }
    
    a:hover{
     text-decoration: none;
    }
    
    /* ///////////// color  codes //////////////*/
    .greyblack-bg{
     background:#343a40;
    }
    
    .white-bg{
     background:#ffffff;
    }
    
    /*////////////// header ////////////////*/
    
    .my-header-nav{
     padding: 0px;
     margin: 0px;
    }
    
    .my-header-nav nav ul{
     padding: 0px;
     margin: 0px;
    }
    
    .my-header-nav nav ul li{
     display: inline-block; 
    }
    
    .my-header-nav nav ul li a{
     display: block;
     font-size: 16px;
     padding: 35px 10px 35px 10px;
     font-family:"Rubik",sans-serif;
     text-transform: capitalize;
     font-weight: 400;
     color: #191d34;
     transition: 0.3s;
     text-decoration: none;
     position: relative;
    }
    
    .my-header-nav nav ul li .my-ul-service{
     display: none;
    }
    
    .my-mobile-menu{
     position: absolute;
     top: -8px;
     right: 25px;
    }
    
    .my-mobile-menu a{
     font-size: 35px;
     display: block;
     text-align: right;
     color: #021238;
    }
    
    /*/////// Responsive Menu //////*/
    
    @media screen and (min-width: 992px){
    
     .my-header-nav nav ul{
      display: block !important;
     }
    }
    
    @media (max-width: 991px) {
    
     .my-header-navmenu{
      padding: 10px 0;
         height: 60px;
     }
    
     .my-header-navmenu .my-header-nav{
      position: absolute;
      left: 50px;
      right: 50px;
      height: 100%;
      top: 45px;
     }
    
     .my-header-nav nav ul {
      background:#ffffff;
      opacity: 98%;
      display: none;
     }
    
     .my-header-nav nav ul li{
      display: block;
     }
    
     .my-header-nav nav ul li a{
      display: block;
      font-size: 14px;
      padding: 5px 10px;
      margin: 2px 5px;
      font-family:"Rubik",sans-serif;
      text-transform: capitalize;
      font-weight: 400;
      color: #191d34;
      text-decoration: none;
    
     }
    
     .my-header-nav nav ul li a.active-page{
      color:#ff5e13;
     }
    
     .my-header-nav nav ul li a:hover{
      color:#ff5e13;
      transition: 0.5s;
     }
    
     .my-header-nav nav ul li .my-ul-service{
      display: none;
         
     }
    
     .my-header-nav nav ul li .my-ul-service li{
      display: block;
     }
    
     .my-header-nav nav ul li .my-ul-service li a{
      display: block;
      font-size: 14px;
      padding: 5px 10px;
      margin: 2px 5px;
      font-family:"Rubik",sans-serif;
      text-transform: capitalize;
      font-weight: 400;
      color: #191d34;
      text-decoration: none;
     }
    
    }
    
    
    @media (max-width: 575px) {
    
     .my-header-navmenu .my-header-nav{
      position: absolute;
      left: 5px;
      right: 5px;
      height: 100%;
      top: 45px;
     }
    
    }
    
    .asdf{
     height: 300px;
     background-color:#ff5e13;
    }

     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
     <!-- jQuery library -->
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
     <!-- Popper JS -->
     <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
     <!-- Latest compiled JavaScript -->
     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
     <title>My First Bootstrap Website</title>
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <!-- CSS here -->
     <link rel="stylesheet" href="css/bootstrap.min.css">
     <link rel="stylesheet" href="css/style.css">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

      <div class="my-header-area">
       <div class="my-header-navmenu white-bg">
        <div class="container">
         <div class="row align-items-center">
          <div class="col-lg-12 col-xl-12">
           <div class="my-header-nav "><!--d-none d-lg-block-->
            <nav>
             <ul class="my-ul-nav">
              <li><a href="#" class="active-page">Home</a></li>
              <li><a href="#">About</a></li>
              <li class="my-pa-service"><a href="#">service</a>
               <ul class="my-ul-service">
                <li><a href="#">service1</a></li>
                <li><a href="#">service1</a></li>
                <li><a href="#">service3</a></li>
               </ul> 
              </li> 
              <li><a href="#">blog</a></li>
              <li><a href="#">Contact</a></li>
             </ul>
            </nav> 
           </div>
          </div>
          <div class="col-12">
           <div class="my-mobile-menu d-block d-lg-none"><a href="#"><i class="fa fa-bars" aria-hidden="true"></i></a></div>
          </div>
         </div>
        </div>
       </div>
      </div> 

      <div class="asdf">
       
      </div>
     <!-- JS here -->
     <script src="js/navigationbar.js"></script>

如果我理解的话，问题是 service 下拉菜单在您打开主下拉菜单时打开，而您不希望这样..好吧..这就是问题所在 

$('.my-mobile-menu').click(function(){
            $('.my-header-navmenu nav ul').slideToggle(250,'swing');
        });

您是在告诉它在单击按钮时打开 nav ul。它将找到 nav 中的每个 ul 元素并打开它。

与其通过定位 html 标签打开它，不如尝试添加 类 并改为定位它们。

$('.my-mobile-menu').click(function(){
            $('.my-header-navmenu nav .my-ul-nav').slideToggle(250,'swing');
        });

或者您可以保留它，但像这样更改选择器

$('.my-mobile-menu').click(function(){
            $('.my-header-navmenu nav>ul').slideToggle(250,'swing');
        });

请注意，我添加了 >。它只会首先直接定位 child nav 个元素。

你是这个意思吗？

    $(document).ready(function(){
     $('.my-mobile-menu').click(function(){
      $('.my-header-navmenu nav ul').slideToggle(250,'swing'); //this shows all ul including the service nav
            $('.my-ul-service').hide(); //just hide it here
     });
    
     $('.my-pa-service').on('click',function(e){
      $('.my-ul-service').slideToggle('swing');
     });
    
    });

    body{
     box-sizing: border-box;
     padding: 0;
     margin: 0;
     width: 100%;
    }
    
    ul{
     margin: 0px;
     padding: 0px;
    }
    
    li{
     list-style-type: none;
    
    }
    
    a{
     text-decoration: none;
     margin: 0;
     padding: 0;
    }
    
    a:hover{
     text-decoration: none;
    }
    
    /* ///////////// color  codes //////////////*/
    .greyblack-bg{
     background:#343a40;
    }
    
    .white-bg{
     background:#ffffff;
    }
    
    /*////////////// header ////////////////*/
    
    .my-header-nav{
     padding: 0px;
     margin: 0px;
    }
    
    .my-header-nav nav ul{
     padding: 0px;
     margin: 0px;
    }
    
    .my-header-nav nav ul li{
     display: inline-block; 
    }
    
    .my-header-nav nav ul li a{
     display: block;
     font-size: 16px;
     padding: 35px 10px 35px 10px;
     font-family:"Rubik",sans-serif;
     text-transform: capitalize;
     font-weight: 400;
     color: #191d34;
     transition: 0.3s;
     text-decoration: none;
     position: relative;
    }
    
    .my-header-nav nav ul li .my-ul-service{
     display: none;
    }
    
    .my-mobile-menu{
     position: absolute;
     top: -8px;
     right: 25px;
    }
    
    .my-mobile-menu a{
     font-size: 35px;
     display: block;
     text-align: right;
     color: #021238;
    }
    
    /*/////// Responsive Menu //////*/
    
    @media screen and (min-width: 992px){
    
     .my-header-nav nav ul{
      display: block !important;
     }
    }
    
    @media (max-width: 991px) {
    
     .my-header-navmenu{
      padding: 10px 0;
         height: 60px;
     }
    
     .my-header-navmenu .my-header-nav{
      position: absolute;
      left: 50px;
      right: 50px;
      height: 100%;
      top: 45px;
     }
    
     .my-header-nav nav ul {
      background:#ffffff;
      opacity: 98%;
      display: none;
     }
    
     .my-header-nav nav ul li{
      display: block;
     }
    
     .my-header-nav nav ul li a{
      display: block;
      font-size: 14px;
      padding: 5px 10px;
      margin: 2px 5px;
      font-family:"Rubik",sans-serif;
      text-transform: capitalize;
      font-weight: 400;
      color: #191d34;
      text-decoration: none;
    
     }
    
     .my-header-nav nav ul li a.active-page{
      color:#ff5e13;
     }
    
     .my-header-nav nav ul li a:hover{
      color:#ff5e13;
      transition: 0.5s;
     }
    
     .my-header-nav nav ul li .my-ul-service{
      display: none;
         
     }
    
     .my-header-nav nav ul li .my-ul-service li{
      display: block;
     }
    
     .my-header-nav nav ul li .my-ul-service li a{
      display: block;
      font-size: 14px;
      padding: 5px 10px;
      margin: 2px 5px;
      font-family:"Rubik",sans-serif;
      text-transform: capitalize;
      font-weight: 400;
      color: #191d34;
      text-decoration: none;
     }
    
    }
    
    
    @media (max-width: 575px) {
    
     .my-header-navmenu .my-header-nav{
      position: absolute;
      left: 5px;
      right: 5px;
      height: 100%;
      top: 45px;
     }
    
    }
    
    .asdf{
     height: 300px;
     background-color:#ff5e13;
    }

     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
     <!-- jQuery library -->
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
     <!-- Popper JS -->
     <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
     <!-- Latest compiled JavaScript -->
     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
     <title>My First Bootstrap Website</title>
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <!-- CSS here -->
     <link rel="stylesheet" href="css/bootstrap.min.css">
     <link rel="stylesheet" href="css/style.css">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

      <div class="my-header-area">
       <div class="my-header-navmenu white-bg">
        <div class="container">
         <div class="row align-items-center">
          <div class="col-lg-12 col-xl-12">
           <div class="my-header-nav "><!--d-none d-lg-block-->
            <nav>
             <ul class="my-ul-nav">
              <li><a href="#" class="active-page">Home</a></li>
              <li><a href="#">About</a></li>
              <li class="my-pa-service"><a href="#">service</a>
               <ul class="my-ul-service">
                <li><a href="#">service1</a></li>
                <li><a href="#">service1</a></li>
                <li><a href="#">service3</a></li>
               </ul> 
              </li> 
              <li><a href="#">blog</a></li>
              <li><a href="#">Contact</a></li>
             </ul>
            </nav> 
           </div>
          </div>
          <div class="col-12">
           <div class="my-mobile-menu d-block d-lg-none"><a href="#"><i class="fa fa-bars" aria-hidden="true"></i></a></div>
          </div>
         </div>
        </div>
       </div>
      </div> 

      <div class="asdf">
       
      </div>
     <!-- JS here -->
     <script src="js/navigationbar.js"></script>