2017-10-09 3 views
0

2 개의 드롭 다운 목록 중 하나는 작동하지만 다른 하나는 모바일보기에서 작동하지 않습니다. 모바일보기에서 토글 하단을 클릭 한 후 첫 번째 드롭 다운 만 드롭 다운 목록의 작동 나머지는 작동하지 않습니다. 왜 드롭 다운 목록 중 하나만 작동하는 나머지 드롭 다운 목록이 작동하지 않는 것입니까? 나는이 같은 ASP.net 메뉴와 함께 부트 스트랩 4.0을 사용하고 있습니다 (및 작동)드롭 다운 목록이 asp.net의 모바일보기에서 작동하지 않습니다.

enter image description here

<body> 
    <form id="form1" runat="server"> 
    <link rel="stylesheet" href='http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/css/bootstrap.min.css' 
     media="screen" /> 
    <script type="text/javascript" src='http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.3.min.js'></script> 
    <script type="text/javascript" src='http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/js/bootstrap.min.js'></script> 
    <div class="navbar navbar-default"> 
     <div class="container-fluid"> 
      <div class="navbar-header"> 
       <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" 
        aria-expanded="false"> 
        <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="bs-example-navbar-collapse-1"> 
       <asp:Menu ID="Menu1" runat="server" Orientation="Horizontal" RenderingMode="List" 
        IncludeStyleBlock="false" StaticMenuStyle-CssClass="nav navbar-nav" DynamicMenuStyle-CssClass="dropdown-menu"> 
        <Items> 

          <asp:MenuItem Text="Drop Down" NavigateUrl="#"> 
           <asp:MenuItem Text="two" NavigateUrl="#" /> 
           <asp:MenuItem Text="three" NavigateUrl="#" /> 
           <asp:MenuItem Text="six" NavigateUrl="#" /> 
          </asp:MenuItem> 
         <asp:MenuItem Text="Drop Down 2" NavigateUrl="#"> 
           <asp:MenuItem Text="four" NavigateUrl="#" /> 
           <asp:MenuItem Text="five" NavigateUrl="#" /> 
           <asp:MenuItem Text="six" NavigateUrl="#" /> 
          </asp:MenuItem> 
         </Items> 
       </asp:Menu> 
      </div> 
     </div> 
    </div> 
    <script type="text/javascript"> 
     //Disable the default MouseOver functionality of ASP.Net Menu control. 
     Sys.WebForms.Menu._elementObjectMapper.getMappedObject = function() { 
      return false; 
     }; 
     $(function() { 
      //Remove the style attributes. 
      $(".navbar-nav li, .navbar-nav a, .navbar-nav ul").removeAttr('style'); 

      //Apply the Bootstrap class to the SubMenu. 
      $(".dropdown-menu").closest("li").removeClass().addClass("dropdown-toggle"); 

      //Apply the Bootstrap properties to the SubMenu. 
      $(".dropdown-toggle").find("a").eq(0).attr("data-toggle", "dropdown").attr("aria-haspopup", "true").attr("aria-expanded", "false").append("<span class='caret'></span>"); 

      //Apply the Bootstrap "active" class to the selected Menu item. 
      $("a.selected").closest("li").addClass("active"); 
      $("a.selected").closest(".dropdown-toggle").addClass("active"); 
     }); 
    </script> 
    <hr /> 

    </form> 
</body> 

답변

0

부트 스트랩 CDN

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous"> 
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script> 

같은 ASP.net 메뉴를 구현
<nav class="navbar navbar-expand-md navbar-light" style="background-color: #e3f2fd;"> 
<a class="navbar-brand" href="/"><img src="/" alt="" width="150px" /></a> 
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> 
    <span class="navbar-toggler-icon"></span> 
    </button> 

<div class="collapse navbar-collapse" id="navbarSupportedContent"> 
<asp:Menu ID="MainMenu" runat="server" Orientation="horizontal" CssClass="navbar-nav mr-auto" StaticMenuStyle-CssClass="nav-item" StaticSelectedStyle-CssClass="nav-item" StaticSubMenuIndent="16px" DynamicMenuStyle-CssClass="nav-item dropdown-menu" RenderingMode="List" role="navigation" itemscope="itemscope" itemtype="https://schema.org/SiteNavigationElement" > 

     <LevelMenuItemStyles> 
      <asp:MenuItemStyle CssClass="dropdown-item" HorizontalPadding="15px" Height="50px" VerticalPadding="15px" /> 
     </LevelMenuItemStyles> 
     <LevelSelectedStyles> 
      <asp:MenuItemStyle CssClass="nav-item active" Font-Underline="False" /> 
     </LevelSelectedStyles> 
     <StaticHoverStyle Font-Underline="true" /> 
     <StaticSelectedStyle Font-Bold="true" /> 
    <DynamicMenuItemStyle CssClass="dropdown-item" /> 
</asp:Menu> 
</div> 

여러 드롭 다운 메뉴와 함께 dbase에서 여러 메뉴 항목을로드하고 있습니다. 어쩌면이 예제가 문제를 해결하는 데 도움이 될까요?