htmlドロップダウンメニューがモバイルサイズで正しく機能しない

Question

私は実際にHTMLとCSSに新しいです。私はメニューの問題に直面しています。この問題は、モバイルで開いている間にのみ発生しますが、デスクトップ上では完全に動作します。

ここでは、モバイルでこれをサブメニューレベル1までチェックしている間に、サブメニューレベル2を開くためにサブメニューレベル1をクリックしている間、ロールバックしています。

#top-menu { 
 
    margin-bottom: 0; 
 
    border: 0; 
 
    border-radius: 0; 
 
    background: #ffffff; 
 
    height: auto; 
 
    color: #777777; 
 
    padding: 10px 0 2px 0; 
 
    border-top: 4px solid #33699e; 
 
} 
 
#top-menu.navbar { min-height: 35px !important } 
 
#top-menu p.text-right span { margin-left: 15px } 
 
a.logo.navbar-brand { color: #33699e } 
 
.logo { 
 
    font-family: 'Arvo', serif; 
 
    font-weight: 0; 
 
    font-size: 27px; 
 
    text-transform: none; 
 
    letter-spacing: 1px; 
 
    margin: 15px 15px 25px 0; 
 
    margin-right: 40px; 
 
    border: 1px solid #33699e; 
 
} 
 
#top-menu .navbar-header small { 
 
    text-transform: uppercase; 
 
    font-weight: 700; 
 
    font-family: 'Raleway', sans-serif; 
 
    margin-top: -50px; 
 
} 
 
ul.top-links li { padding: 5px 0 } 
 
.top-contact ol li { 
 
    margin-left: 20px; 
 
    font-weight: 900; 
 
} 
 
#main-menu { 
 
    margin-bottom: 0; 
 
    border: 0; 
 
    border-radius: 0; 
 
    background: linear-gradient(to bottom, #377cb7, #397db8); 
 
    min-height: 30px; 
 
} 
 
#sticky { 
 
    padding: 0.5ex; 
 
    width: 600px; 
 
    background-color: #333; 
 
    color: #fff; 
 
    font-size: 2em; 
 
    border-radius: 0.5ex; 
 
} 
 
#main-menu.stick { 
 
    position: fixed; 
 
    top: 0; 
 
    width: 100%; 
 
    z-index: 10000; 
 
} 
 
.navbar-collapse { padding-left: 0 } 
 
#main-menu .nav > li > a { padding: 10px 10px } 
 
.navbar-default .navbar-toggle { border-color: #fff; background-color: #fff; } 
 
.navbar-default .navbar-toggle:hover, 
 
.navbar-default .navbar-toggle:focus { background: #ededed; } 
 
.navbar-toggle { 
 
    /* float: none !important;*/ 
 
    color: #3772ac; 
 
} 
 
.navbar-toggle i { text-align: center } 
 
#main-menu i.fa.fa-bars { font-size: 10px } 
 
#main-menu.navbar-default .navbar-brand:hover, 
 
#main-menu.navbar-default .navbar-brand { color: #33699e } 
 
.dropdown-menu > li > a, 
 
#main-menu.navbar-default .navbar-nav > li > a { 
 
    font-family: 'Sintony', sans-serif; 
 
    color: #f1f1f1; 
 
    text-transform: none; 
 
    font-weight: 0; 
 
    letter-spacing: 0px; 
 
} 
 
#main-menu.navbar-default .navbar-nav > .active > a, 
 
#main-menu.navbar-default .navbar-nav > .active > a:hover, 
 
#main-menu.navbar-default .navbar-nav > .active > a:focus, 
 
#main-menu.navbar-default .navbar-nav > li > a:hover, 
 
#main-menu.navbar-default .navbar-nav > li > a:focus { 
 
    color: #33699e !important; 
 
    background-color: #dbdbdb; 
 
    border-color: #33699e; 
 
} 
 
#main-menu .navbar-nav > li > a { 
 
    padding-top: 13px; 
 
    padding-bottom: 14px; 
 
    border-top: 2px solid transparent; 
 
    margin-right: 10px; 
 
    transition: all 0.8s; 
 
    -webkit-transition: all 0.8s; 
 
    -moz-transition: all 0.8s; 
 
    -o-transition: all 0.8s; 
 
\t text-align: center; 
 
} 
 
ol.social-icons li { 
 
    width: 25px; 
 
    height: 25px; 
 
    margin-left: 5px !important; 
 
} 
 
ol.social-icons li a:hover, 
 
ol.social-icons li a:focus { color: #ffffff !important } 
 
ol.social-icons li a { 
 
    color: #ffffff; 
 
    background: #33699e; 
 
    font-size: 16px; 
 
    border-radius: 50%; 
 
    padding: 4px 8px !important; 
 
    margin: 0px -6px !important; 
 
} 
 
ol.social-icons li:hover a { background: #33699e } 
 
#main-menu .navbar-form { 
 
    padding: 10px 0 5px 0; 
 
    margin-top: 0; 
 
    margin-right: -15px; 
 
    margin-bottom: 8px; 
 
    margin-left: -15px; 
 
    border-top: 1px solid transparent; 
 
    border-bottom: 1px solid transparent; 
 
    -webkit-box-shadow: none; 
 
    box-shadow: none; 
 
} 
 
#main-menu .form-control { 
 
    border-top-left-radius: 20px; 
 
    border-bottom-left-radius: 20px; 
 
    border-color: #656565; 
 
    background: transparent; 
 
    border-right-color: transparent; 
 
    color: #f1f1f1; 
 
} 
 
#main-menu .input-group-btn button.btn.btn-default { 
 
    background: transparent; 
 
    border-color: #656565; 
 
    color: #fff; 
 
    border-top-right-radius: 20px; 
 
    border-bottom-right-radius: 20px; 
 
    border-left-color: transparent; 
 
} 
 
.dropdown-menu > .active > a, 
 
.dropdown-menu > .active > a:hover, 
 
.dropdown-menu > .active > a:focus, 
 
.navbar-default .navbar-nav > .open > a:hover { 
 
    color: #222 !important; 
 
    background-color: #FFFFFF; 
 
} 
 
.navbar-default .navbar-nav > .open > a, 
 
.navbar-default .navbar-nav > .open > a:focus { background-color: transparent } 
 
.dropdown-menu { 
 
    position: absolute; 
 
    top: 100%; 
 
    left: 0; 
 
    z-index: 1000; 
 
    display: none; 
 
    float: left; 
 
    min-width: 160px; 
 
    padding: 0; 
 
    margin: 0; 
 
    font-size: 14px; 
 
    text-align: left; 
 
    list-style: none; 
 
    background-color: #33699e; 
 
    -webkit-background-clip: padding-box; 
 
    background-clip: padding-box; 
 
    border: 0; 
 
    border: 0; 
 
    border-radius: 0; 
 
} 
 
.dropdown-menu > li > a { 
 
    display: block; 
 
    padding: 12px 20px; 
 
    clear: both; 
 
    font-weight: normal; 
 
    line-height: 1.42857143; 
 
    color: #f3f3f3; 
 
    white-space: nowrap; 
 
} 
 
.dropdown-submenu { 
 
    position: relative; 
 
} 
 

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

 
.dropdown-submenu:hover>.dropdown-menu { 
 
    display: block; 
 
} 
 

 
.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: #ccc; 
 
    margin-top: 5px; 
 
    margin-right: -10px; 
 
} 
 

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

 
.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; 
 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
</head> 
 

 
<body> 
 
<nav id="main-menu" class="navbar navbar-default"> 
 

 
      <div class="col-md-3 col-sm-2"></div> 
 
      <div class="col-md-6 col-sm-8"> 
 
       <!-- Brand and toggle get grouped for better mobile display --> 
 
       <div class="navbar-header"> 
 
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#myMenu"> 
 
         <i class="fa fa-list-ul"></i> 
 
        </button> 
 
       </div> 
 

 
       <!-- Collect the nav links, forms, and other content for toggling --> 
 
       <div class="collapse navbar-collapse" id="myMenu"> 
 
        <ul class="nav navbar-nav navbar-left"> 
 
         <li><a href="<?php echo site_url(); ?>/home_view/index">Home</a> 
 
         </li> 
 
         <li><a href="#about">About Me</a> 
 
         </li> 
 
         <li class="dropdown"> 
 
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Services <span class="caret"></span></a> 
 
          <ul class="dropdown-menu" role="menu"> 
 
           <li class="dropdown-submenu"> 
 
           <a href="#">submenu level 1</a> 
 
           \t <ul class="dropdown-menu"> 
 
             <li><a href="#">submenu level 2</a></li> 
 
             <li><a href="#">submenu level 2 </a></li> 
 
             <li><a href="#">submenu level 2 </a></li> 
 
            </ul> 
 
           </li> 
 
           
 
           
 
           
 
         </li> 
 
         </ul> 
 
         </li> 
 
         <li><a href="<?php echo site_url(); ?>/blog_view/index">Blog</a> 
 
         </li> 
 
         <li class="smoth-scroll"><a href="#contact">Reviews</a> 
 
         </li> 
 
         <li class="smoth-scroll"><a href="#contact">Contact Us</a> 
 
         </li> 
 
         <li><a href="<?php echo site_url(); ?>/home_view/sitemap">Site Map</a> 
 
         </li> 
 

 
        </ul> 
 

 
       </div> 
 
       <!-- /.navbar-collapse --> 
 
      </div> 
 
      <div class="col-md-3 col-sm-2"></div> 
 
      <!-- /.container --> 
 
     </nav> 
 
</body> 
 
</html>

Answer 1

これが参考に願って、あなたはあなたのニーズとしてのスタイルを編集することができます。

(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); 
 

 

 
if ($(window).width() > 768){ 
 
$(function(){ 
 
    $('.dropdown').hover(function() { 
 
     $(this).addClass('open'); 
 
    }, 
 
    function() { 
 
     $(this).removeClass('open'); 
 
    }); 
 
}); 
 
}

.marginBottom-0 { 
 
    margin-bottom: 0; 
 
} 
 

 
.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; 
 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 

 
<nav class="navbar navbar-inverse navbar-static-top marginBottom-0" 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> 
 
    </div> 
 

 
    <div class="collapse navbar-collapse" id="navbar-collapse-1"> 
 
    <ul class="nav navbar-nav"> 
 
     <li class="active"><a href="#">Home</a></li> 
 
     <li><a href="#">About Me</a></li> 
 
     <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Services <b class="caret"></b></a> 
 
     <ul class="dropdown-menu"> 
 
      <li><a href="#">Dropdown Link 1</a></li> 
 
      <li class="dropdown dropdown-submenu"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown Link 2</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> 
 

 
     </ul> 
 
     </li> 
 

 
    </ul> 
 
    </div> 
 
    <!-- /.navbar-collapse --> 
 
</nav>