代码之家 › 专栏 › 技术社区 › Matthew Wherry

jquery和bootstrap:导航下拉错误

nav twitter-bootstrap jquery

Matthew Wherry · 技术社区 · 6 年前

我在使用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>

现在,im获取的问题与第一次单击下拉列表和ref=“”有关。jquery显然试图将其解析为链接或页面?完全错误如下:

未捕获错误:语法vm jquery-3.3.1.js:1541错误,无法识别的表达式:。#
at function.sizzle.error(vm29 jquery-3.1.1.js:1541)
at function.sizzle.tokenize(vm29 jquery-3.1.1.js:2193)
在function.sizzle.select上(vm29 jquery-3.1.1.js:2620)
在function.sizzle[as find]上(vm29 jquery-3.1.1.js:845)
在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实例 nav部分和css是从answers部分的工作片段直接复制的。 通过nuget管理器安装的脚本与版本匹配 (页面上http的重定向用于占位符。)单击下拉列表不会产生任何结果…

编辑4 感谢Fnostro( https://stackoverflow.com/users/1971438 )为了进行对话和调试…脚本管理器正在加载标记中的加载项,并且加载了每个标记的不同版本。

Nuget包
JQuery 3.3.1
引导4.1.1

1 回复 | 直到 6 年前

fnostro 6 年前

您的下拉列表没有按照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的snippet大型下拉列表

按预期工作

.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的snippet大型下拉列表

似乎不相容

.dropdown大{
位置:静态!重要的;
}

。下拉菜单大{
左边距:16px;
右边距:16px;
衬垫:20px0px;
}

。下拉菜单大>li>ul{
填料:0;
保证金:0;
}

。下拉菜单大>li>ul>li{
列表样式:无;
}

。下拉菜单大>li>ul>li>a{
显示:块;
衬垫:3px20px;
清楚:两者;
字体粗细:正常;
线路高度:1.428571429;
颜色:333333;
空白:正常;
}

。下拉菜单大>li ul>li>A:悬停,
。下拉菜单大>li ul>li>A:焦点{
文字装饰:无;
颜色:262626;
背景色:f5f5f5;
}

。下拉菜单大。已禁用>a,
。下拉菜单大。禁用>A:悬停,
。下拉菜单大。已禁用>A:焦点{
颜色:999999;
}

。下拉菜单大。禁用>A:悬停,
。下拉菜单大。已禁用>A:焦点{
文字装饰:无;
背景色:透明;
背景图像:无;
过滤器:progid:dximagetransform.microsoft.gradient(enabled=false);
光标:不允许;
}

。下拉菜单大。下拉标题{
颜色:428BCA;
字号:18px;
}

@媒体(最大宽度:768px){
。下拉菜单大{
左边距:0;
右边距:0;
}
。下拉菜单大>li{
底边距:30px;
}
。下拉菜单大>li:最后一个子项{
边距底部:0;
}
。下拉菜单大。下拉标题{
衬垫:3px15px!重要的;
}
}

<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>