【问题标题】：JQuery and Bootstrap: Bad Nav Dropdown BugJQuery 和 Bootstrap：Bad Nav Dropdown Bug
【发布时间】：2018-11-15 00:05:39
【问题描述】：

我在使用 jquery 和 bootstrap 的下拉菜单时遇到问题。这在以前的版本中似乎很常见，我不明白为什么我目前会收到错误。 html如下：

<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 显然试图将其解析为链接或页面？完整的错误如下：

未捕获的错误：语法 VM jquery-3.3.1.js:1541 错误，无法识别表达式：#
在 Function.Sizzle.error (VM29 jquery-3.1.1.js: 第1541章，2193
在 Function.Sizzle.select (VM29 jquery-3.1.1.js: 2620)
在 Function.Sizzle [as find] (VM29 jquery-3.1.1.js: 845)
at JQuery.fn.init.find (VM29 jquery-3.1.1.js: 2873)
在新 JQuery.fn.init (VM29 jquery-3.1.1.js: 2983)
在 JQuery (VM29 jquery-3.1.1.js: 139)
在 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 混合并尝试了不同的组合，但要么完全不起作用，要么收到错误消息。

EDIT3 实时示例导航部分和 css 是来自答案部分中所述工作 sn-p 的直接副本。 通过 nuget manager 安装的脚本与版本匹配 （页面上 http 的重定向用于占位符。）单击下拉菜单不会产生任何结果...

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

Nuget 包
jQuery 3.3.1
引导程序 4.1.1

【问题讨论】：

你好像错过了链接popper.js
我尝试在 jquery 和 bootstrap 之间添加它，但这也不能解决它......
您的导航栏似乎没有为 BS 4.1.1 下拉菜单正确标记。见this

标签： jquery twitter-bootstrap nav

【解决方案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>

Snippet Large DropDown 使用 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>

【讨论】：

我正在使用一个用于引导 sn-p 的 sn-p。见 EDIT2
根据 sn-p 作者的说法，sn-p 旨在在 Bootstrap 3.0.0 下工作，但它在 3.3.7 下工作，但不是 4.1.1。您需要重新配置所有标记以符合 4.1.1 下拉菜单以使其正常工作，或在您的环境中使用 3.3.7。
我尝试过使用 BS 3.0.0，但仍然失败
如果您在帖子中使用标记，则在您的示例中仍然缺少结束 </a>
除此之外，如果您运行上面的 3.3.7 sn-p，显然它可以工作。将视图切换为“全屏”