下拉列表在 asp.net 的移动视图中不起作用
Posted
技术标签:
【中文标题】下拉列表在 asp.net 的移动视图中不起作用【英文标题】：dropdown list not working in mobile view in asp.net 【发布时间】：2018-03-20 07:30:14 【问题描述】：我有 2 个下拉列表，其中一个正在运行，但另一个在移动视图中不起作用。在移动视图中单击切换底部后，只有第一个下拉列表才有效，其余的下拉列表不起作用。为什么只有一个下拉列表工作其余的下拉列表不起作用。
<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>
【问题讨论】：
【参考方案1】：我正在使用 Bootstrap 4.0 和这样的 ASP.net 菜单（它有效） 引导 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="/" /></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 加载几个菜单项，其中包含几个下拉菜单。也许这个例子有助于解决您的问题？
【讨论】：
以上是关于下拉列表在 asp.net 的移动视图中不起作用的主要内容，如果未能解决你的问题，请参考以下文章
Jquery 类选择器在 ASP.Net Gridview 中不起作用
尝试在 page_load 上显示 2 个下拉列表中的 1 个将不起作用。 ASP.net