2017-10-09 10 views
0

2つのドロップダウンリストがありますが、1つは動作していますが、別のものはモバイルビューでは動作していません。モバイルビューでトグルボトムをクリックした後、最初のドロップダウンのみドロップダウンリストの作業残りは動作しません。ドロップダウンリストの残りの1つのドロップダウンだけが機能しない理由は何ですか?私はこのような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からいくつかのメニュー項目を読み込んでいます。おそらく、この例はあなたの問題を解決するのに役立ちますか?

関連する問題