javascript - 如何在显示下拉菜单项时使导航栏响应

Question

我在使用 Bootstrap 使我的导航栏响应时遇到问题。我不想隐藏子菜单列表，而是希望它显示 并使其响应。我只是借用了谷歌的标志，因为我的标志与它的尺寸相同。一旦我缩小它，它就不会做出响应。我正在使用 navbar-header、nav 等引导类，但它不起作用。请在下面查看我的代码以供您查看。

ul.nav ul{
  padding-left: 0;
  margin-top: 10px;
}

ul.nav li{
  list-style: none;  
}

.menu-header{
  border-bottom: solid 1px #000;
  padding-bottom: 3px;

}

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <div class="navbar navbar-default" style="margin-bottom: 0;">

    		<div class="container">
    			<div class="navbar-header">
    				<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
    		            <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="#">
    					<img class="" src="https://www.google.com.ph/images/branding/googlelogo/2x/googlelogo_color_120x44dp.png">
    				</a>
    			</div>
    			<ul class="nav navbar-nav navbar-right">
    				<li class="">
    					<a href="#">

    					</a>
    				</li>
    				<li class="">
    					<div class="">
    						<div class="menu-header">MENU1</div>
    						<ul>
    							<li>
    								<a href="#">Sub1 of MENU1</a>
    							</li>
    							<li>
    								<a href="#">Sub2 of MENU1</a>
    							</li>
    						</ul>
    					</div>
    				</li>
    				<li class="">
    					<div class="">
    						<div class="menu-header">MENU2</div>
    						<ul>
    							<li>
    								<a href="#">Sub1 of MENU2</a>
    							</li>
    							<li>
    								<a href="#">Sub2 of MENU2</a>
    							</li>
    							<li>
    								<a href="#">Sub3 of MENU2</a>
    							</li>
    							<li>
    								<a href="#">Sub4 of MENU2</a>
    							</li>
    							<li>
    								<a href="#">Sub5 of MENU2</a>
    							</li>
    						</ul>
    					</div>
    				</li>
    				<li class="">
    					<div class="">
    						<div class="menu-header">MENU3</div>
    						<ul>
    							<li>
    								<a href="#">Sub1 of MENU3</a>
    							</li>
    							<li>
    								<a href="#">Sub2 of MENU3</a>
    							</li>
    							<li>
    								<a href="#">Sub3 of MENU3</a>
    							</li>
    						</ul>
    					</div>
    				</li>
    				<li class="">
    					<div class="">
    						<div class="menu-header">MENU4</div>
    						<ul>
    							<li>
    								<a href="#">Sub1 of MENU4</a>
    							</li>
    							<li>
    								<a href="#">Sub2 of MENU4</a>
    							</li>
    							<li>
    								<a href="#">Sub3 of MENU4</a>
    							</li>
    						</ul>
    					</div>
    				</li>
    			</ul>

    			<div class="clearfix"></div>

    			<div class="pull-right">
    				<div class="btn-group">
    					<button type="button" class="btn btn-primary dropdown-toggle dropdown-login-btn" data-toggle="dropdown" aria-expanded="false">
    						☻ Log In <span class="caret"></span>
    					</button>
    					<ul class="dropdown-menu">
    						<li>
    							here
    						</li>
    					</ul>
    				</div>
    				<a class="btn btn-primary reg" href="#">◘ Register</a>
    			</div>


    		</div> <!-- End of Container -->

    		<div class="fgol-header-line"></div>

    	</div>
      
      
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

Answer 1

如果您在图像中显示它应该是什么样子，那将会很有帮助。

我猜想您要实现的目标是:

ul.nav ul{
  padding-left: 0;
  margin-top: 10px;
}

ul.nav li{
  list-style: none;  
}

.menu-header{
  border-bottom: solid 1px #000;
  padding-bottom: 3px;

}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <div class="navbar navbar-default" style="margin-bottom: 0;">

    		<div class="container">
    			<div class="navbar-header">
    				<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#mainSubNav" aria-expanded="false" aria-controls="navbar">
    		            <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="#">
    					<img class="" src="https://www.google.com.ph/images/branding/googlelogo/2x/googlelogo_color_120x44dp.png">
    				</a>
    			</div>
          <div class="collapse navbar-collapse" id="mainSubNav">
    			<ul class="nav navbar-nav navbar-right">
					<li class="dropdown">
						<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">MENU1 <span class="caret"></span></a>
						<ul class="dropdown-menu">
    							<li>
    								<a href="#">Sub1 of MENU1</a>
    							</li>
    							<li>
    								<a href="#">Sub2 of MENU1</a>
    							</li>							
						</ul>
					</li>
					
					<li class="dropdown">
						<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">MENU2 <span class="caret"></span></a>
						<ul class="dropdown-menu">
    							<li>
    								<a href="#">Sub1 of MENU2</a>
    							</li>
    							<li>
    								<a href="#">Sub2 of MENU2</a>
    							</li>
    							<li>
    								<a href="#">Sub3 of MENU2</a>
    							</li>
    							<li>
    								<a href="#">Sub4 of MENU2</a>
    							</li>
    							<li>
    								<a href="#">Sub5 of MENU2</a>
    							</li>						
						</ul>
					</li>					
					
					<li class="dropdown">
						<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">MENU3 <span class="caret"></span></a>
						<ul class="dropdown-menu">
    							<li>
    								<a href="#">Sub1 of MENU3</a>
    							</li>
    							<li>
    								<a href="#">Sub2 of MENU3</a>
    							</li>
    							<li>
    								<a href="#">Sub3 of MENU3</a>
    							</li>						
						</ul>
					</li>
					
					<li class="dropdown">
						<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">MENU4 <span class="caret"></span></a>
						<ul class="dropdown-menu">
    							<li>
    								<a href="#">Sub1 of MENU4</a>
    							</li>
    							<li>
    								<a href="#">Sub2 of MENU4</a>
    							</li>
    							<li>
    								<a href="#">Sub3 of MENU4</a>
    							</li>					
						</ul>
					</li>

    			</ul>
</div>
    			<div class="clearfix"></div>

    			<div class="pull-right">
    				<div class="btn-group">
    					<button type="button" class="btn btn-primary dropdown-toggle dropdown-login-btn" data-toggle="dropdown" aria-expanded="false">
    						☻ Log In <span class="caret"></span>
    					</button>
    					<ul class="dropdown-menu">
    						<li>
    							here
    						</li>
    					</ul>
    				</div>
    				<a class="btn btn-primary reg" href="#">◘ Register</a>
    			</div>


    		</div> <!-- End of Container -->

    		<div class="fgol-header-line"></div>

    	</div>
      
      
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

仅供引用，JsFiddle