小贝子编程

JQuery 和 Bootstrap:错误的导航下拉错误



我在使用 jquery 和引导程序的下拉列表中遇到问题。这在以前的版本中似乎很常见，我不明白为什么我目前会收到错误。网页如下：

<html>
<nav class="navbar navbar-default navbar-static">
...Collapsible definition for mobile...
<ul class="nav navbar-nav">
<li class="dropdown dropdown-large">
<a href="#" class="dropdown-medium" data-toggle="dropdown">Dropdown 1</a>
<ul class="col-sm-3">
<li class="dropdown-header">Header 1</li>
<li><a href="Page1.aspx">Page1</a></li>
</ul>
</li>
</ul>
</nav>
<script src="Scripts/jquery-3.3.1.js" type="text/javascript/>
<script src="Scripts/bootstrap.js" type="text/javascript/>
</html>

现在，我遇到的问题与第一次单击下拉列表和href="#"有关。jquery显然试图将其解析为链接或页面？完整的错误如下：

未捕获的错误：语法虚拟机 jquery-3.3.1.js：1541 错误，无法识别 expression： #
at Function.Sizzle.error (VM29 jquery-3.1.1.js： 1541(
at Function.Sizzle.tokenize (VM29 jquery-3.1.1.js： 2193( at
Function.Sizzle.select (VM29 jquery-3.1.1.js： 2620(
at Function.Sizzle [as find] (VM29 jquery-3.1.1.js： 845(
at JQuery.fn.init.find (VM29 jquery-3.1.1.js： 2873(
at new JQuery.fn.init (VM29 jquery-3.1.1.js： 2983(
at JQuery (VM29 jquery-3.1.1.js： 139(
at getParent (VM30 bootstrap.js： 298(
。HTML 锚点数据

请注意，我也尝试过使用 Jquery 2.2.4...菜单不显示，也没有收到错误。我通过安装 jquery 3.3.1 并在该页面上导入 jquery 2.2.4 而不是 3.3.1 版本，让它在本地工作......它在本地工作，但在发布时不起作用。

编辑 在两个脚本导入之间的 umd 文件夹中添加 popper.js，我仍然收到相同的错误

编辑 2 这是我正在使用的自定义 CSS。 https://bootsnipp.com/snippets/featured/large-dropdown-menu 这在本地有效，尽管以一种奇怪的方式。Nuget 包 JQuery 2.2.4 已安装并保留在 .net 捆绑包中，但在页面上的脚本部分中使用 3.1.1 版本并且可以工作。如果我更新到 3.3.1 版本，则会收到该错误。Bootstrap 版本 3.0.0 和 4.1.1 混合并尝试了不同的组合，但所有这些组合要么完全不起作用，要么收到错误消息。

编辑3 实时示例 nav 部分和 css 是答案部分中所述工作片段的直接副本。通过 nuget 管理器安装的脚本与版本匹配(页面上 http 的重定向适用于占位符。在下拉菜单上搜索不会产生任何结果...

编辑 4 感谢 fnostro (https://stackoverflow.com/users/1971438( 的谈话和调试...脚本管理器在标记中的加载上加载，并且还加载了每个版本的不同版本。

Nuget 包
jquery 3.3.1 引导 4.1.1

对于 4.1.1 下拉列表，您的下拉列表未按预期设置样式或标记。 另外，您缺少类上的结束引号和结束锚结束标记。

<li class="dropdown dropdown-large">
<a href="#" class="nav-link dropdown-toggle dropdown-medium" data-toggle="dropdown">Dropdown 1</a>
<div class="dropdown-menu col-sm-3">
<span class="dropdown-header">Header 1</span>
<a class="dropdown-item" href="Page1.aspx">Page1</a>
</div>
</li>


<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</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">
<ul class="navbar-nav">
<li class="dropdown dropdown-large">
<a href="#" class="nav-link dropdown-toggle dropdown-medium" data-toggle="dropdown">Dropdown 1</a>
<div class="dropdown-menu col-sm-3">
<span class="dropdown-header">Header 1</span>
<a class="dropdown-item" href="Page1.aspx">Page1</a>
</div>
</li>
</ul>
</div>
</nav>

使用 jquery 2.1.1 和 Bootstrap 3.3.7 的代码片段大下拉列表

按预期工作

.dropdown-large {
position: static !important;
}
.dropdown-menu-large {
margin-left: 16px;
margin-right: 16px;
padding: 20px 0px;
}
.dropdown-menu-large>li>ul {
padding: 0;
margin: 0;
}
.dropdown-menu-large>li>ul>li {
list-style: none;
}
.dropdown-menu-large>li>ul>li>a {
display: block;
padding: 3px 20px;
clear: both;
font-weight: normal;
line-height: 1.428571429;
color: #333333;
white-space: normal;
}
.dropdown-menu-large>li ul>li>a:hover,
.dropdown-menu-large>li ul>li>a:focus {
text-decoration: none;
color: #262626;
background-color: #f5f5f5;
}
.dropdown-menu-large .disabled>a,
.dropdown-menu-large .disabled>a:hover,
.dropdown-menu-large .disabled>a:focus {
color: #999999;
}
.dropdown-menu-large .disabled>a:hover,
.dropdown-menu-large .disabled>a:focus {
text-decoration: none;
background-color: transparent;
background-image: none;
filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
cursor: not-allowed;
}
.dropdown-menu-large .dropdown-header {
color: #428bca;
font-size: 18px;
}
@media (max-width: 768px) {
.dropdown-menu-large {
margin-left: 0;
margin-right: 0;
}
.dropdown-menu-large>li {
margin-bottom: 30px;
}
.dropdown-menu-large>li:last-child {
margin-bottom: 0;
}
.dropdown-menu-large .dropdown-header {
padding: 3px 15px !important;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<!------ Include the above in your HEAD tag ---------->
<nav class="navbar navbar-default navbar-static">
<div class="navbar-header">
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".js-navbar-collapse">
			<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="#">Large Dropdown Menu</a>
</div>
<div class="collapse navbar-collapse js-navbar-collapse">
<ul class="nav navbar-nav">
<li class="dropdown dropdown-large">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
<ul class="dropdown-menu dropdown-menu-large row">
<li class="col-sm-3">
<ul>
<li class="dropdown-header">Glyphicons</li>
<li><a href="#">Available glyphs</a></li>
<li class="disabled"><a href="#">How to use</a></li>
<li><a href="#">Examples</a></li>
<li class="divider"></li>
<li class="dropdown-header">Dropdowns</li>
<li><a href="#">Example</a></li>
<li><a href="#">Aligninment options</a></li>
<li><a href="#">Headers</a></li>
<li><a href="#">Disabled menu items</a></li>
</ul>
</li>
<li class="col-sm-3">
<ul>
<li class="dropdown-header">Button groups</li>
<li><a href="#">Basic example</a></li>
<li><a href="#">Button toolbar</a></li>
<li><a href="#">Sizing</a></li>
<li><a href="#">Nesting</a></li>
<li><a href="#">Vertical variation</a></li>
<li class="divider"></li>
<li class="dropdown-header">Button dropdowns</li>
<li><a href="#">Single button dropdowns</a></li>
</ul>
</li>
<li class="col-sm-3">
<ul>
<li class="dropdown-header">Input groups</li>
<li><a href="#">Basic example</a></li>
<li><a href="#">Sizing</a></li>
<li><a href="#">Checkboxes and radio addons</a></li>
<li class="divider"></li>
<li class="dropdown-header">Navs</li>
<li><a href="#">Tabs</a></li>
<li><a href="#">Pills</a></li>
<li><a href="#">Justified</a></li>
</ul>
</li>
<li class="col-sm-3">
<ul>
<li class="dropdown-header">Navbar</li>
<li><a href="#">Default navbar</a></li>
<li><a href="#">Buttons</a></li>
<li><a href="#">Text</a></li>
<li><a href="#">Non-nav links</a></li>
<li><a href="#">Component alignment</a></li>
<li><a href="#">Fixed to top</a></li>
<li><a href="#">Fixed to bottom</a></li>
<li><a href="#">Static top</a></li>
<li><a href="#">Inverted navbar</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
<!-- /.nav-collapse -->
</nav>

使用 jquery 3.1.1 和 Bootstrap 4.1.1 的代码片段大下拉列表

似乎不兼容

.dropdown-large {
position: static !important;
}
.dropdown-menu-large {
margin-left: 16px;
margin-right: 16px;
padding: 20px 0px;
}
.dropdown-menu-large>li>ul {
padding: 0;
margin: 0;
}
.dropdown-menu-large>li>ul>li {
list-style: none;
}
.dropdown-menu-large>li>ul>li>a {
display: block;
padding: 3px 20px;
clear: both;
font-weight: normal;
line-height: 1.428571429;
color: #333333;
white-space: normal;
}
.dropdown-menu-large>li ul>li>a:hover,
.dropdown-menu-large>li ul>li>a:focus {
text-decoration: none;
color: #262626;
background-color: #f5f5f5;
}
.dropdown-menu-large .disabled>a,
.dropdown-menu-large .disabled>a:hover,
.dropdown-menu-large .disabled>a:focus {
color: #999999;
}
.dropdown-menu-large .disabled>a:hover,
.dropdown-menu-large .disabled>a:focus {
text-decoration: none;
background-color: transparent;
background-image: none;
filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
cursor: not-allowed;
}
.dropdown-menu-large .dropdown-header {
color: #428bca;
font-size: 18px;
}
@media (max-width: 768px) {
.dropdown-menu-large {
margin-left: 0;
margin-right: 0;
}
.dropdown-menu-large>li {
margin-bottom: 30px;
}
.dropdown-menu-large>li:last-child {
margin-bottom: 0;
}
.dropdown-menu-large .dropdown-header {
padding: 3px 15px !important;
}
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
<!------ Include the above in your HEAD tag ---------->
<nav class="navbar navbar-default navbar-static">
<div class="navbar-header">
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".js-navbar-collapse">
			<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="#">Large Dropdown Menu</a>
</div>
<div class="collapse navbar-collapse js-navbar-collapse">
<ul class="nav navbar-nav">
<li class="dropdown dropdown-large">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
<ul class="dropdown-menu dropdown-menu-large row">
<li class="col-sm-3">
<ul>
<li class="dropdown-header">Glyphicons</li>
<li><a href="#">Available glyphs</a></li>
<li class="disabled"><a href="#">How to use</a></li>
<li><a href="#">Examples</a></li>
<li class="divider"></li>
<li class="dropdown-header">Dropdowns</li>
<li><a href="#">Example</a></li>
<li><a href="#">Aligninment options</a></li>
<li><a href="#">Headers</a></li>
<li><a href="#">Disabled menu items</a></li>
</ul>
</li>
<li class="col-sm-3">
<ul>
<li class="dropdown-header">Button groups</li>
<li><a href="#">Basic example</a></li>
<li><a href="#">Button toolbar</a></li>
<li><a href="#">Sizing</a></li>
<li><a href="#">Nesting</a></li>
<li><a href="#">Vertical variation</a></li>
<li class="divider"></li>
<li class="dropdown-header">Button dropdowns</li>
<li><a href="#">Single button dropdowns</a></li>
</ul>
</li>
<li class="col-sm-3">
<ul>
<li class="dropdown-header">Input groups</li>
<li><a href="#">Basic example</a></li>
<li><a href="#">Sizing</a></li>
<li><a href="#">Checkboxes and radio addons</a></li>
<li class="divider"></li>
<li class="dropdown-header">Navs</li>
<li><a href="#">Tabs</a></li>
<li><a href="#">Pills</a></li>
<li><a href="#">Justified</a></li>
</ul>
</li>
<li class="col-sm-3">
<ul>
<li class="dropdown-header">Navbar</li>
<li><a href="#">Default navbar</a></li>
<li><a href="#">Buttons</a></li>
<li><a href="#">Text</a></li>
<li><a href="#">Non-nav links</a></li>
<li><a href="#">Component alignment</a></li>
<li><a href="#">Fixed to top</a></li>
<li><a href="#">Fixed to bottom</a></li>
<li><a href="#">Static top</a></li>
<li><a href="#">Inverted navbar</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
<!-- /.nav-collapse -->
</nav>

相关内容

最新更新


热门标签：

javascript python java c# php android html jquery c++ css ios sql mysql arrays asp.net json python-3.x ruby-on-rails .net sql-server django objective-c excel regex ruby linux ajax iphone xml vba spring asp.net-mvc database wordpress string postgresql wpf windows xcode bash git oracle list vb.net multithreading eclipse algorithm macos powershell visual-studio image forms numpy scala function api selenium