引导程序4.2.1-未能执行'；查询选择器'；在'；文件'；：'；javascript:void（0）'；不是有效的选择器

我正在做一个项目，我开始在Bootstrap4.0.0上构建它。在这个项目中，每当bootstrap的新版本（4.1.0、4.1.3）出现时，我都会定期更新bootstrap，所有的事情都很好地工作，直到我更新到bootstrap 4.2.1，从那时开始，我在控制台中单击文档时遇到错误

未捕获的DomeException:未能在上执行“querySelector” “文档”：“javascript:void（0）；”不是有效的选择器

我发现这是由于下拉菜单导致的，因为这个错误，下拉菜单不起作用。我还检查了，如果我使用的是href=“javascript:void（0）；”，href=“#！”会发生错误，但是如果我使用不带href或href=“#”的锚定标记，则它工作正常

注意：-我需要地址链接中带有href=“javascript:void（0）；的解决方案，因为href=“#看起来不漂亮，页面会向上滚动到顶部

<div class="dropdown">
        <a class="btn btn-secondary dropdown-toggle" href="javascript:void();" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            Dropdown link
        </a>

        <div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
            <a class="dropdown-item" href="#">Action</a>
            <a class="dropdown-item" href="#">Another action</a>
            <a class="dropdown-item" href="#">Something else here</a>
        </div>
    </div>

以下是我的建议：

删除空的

href

属性并添加

光标：指针

样式以使元素可单击

#下拉菜单链接{
游标：指针；/*引导不需要*/
颜色：白色/*如果需要，请更改*/
}

---

我遇到了这个问题，对此发表的评论将我纳入了解决方案。我从Bootstrap文档中复制了这个示例，我必须从父链接中删除该ID，而是将该ID放在子链接的容器中，而不使用aria labeledby属性，并在父链接数据目标属性中添加一个引用

此示例显示了导致控制台错误的操作：

<li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" href="/Summary/Commercial" data-target="#" data-toggle="dropdown" id="navToggleCommercial" role="button" aria-haspopup="true" aria-expanded="false">
        Commercial
    </a>
    <div class="dropdown-menu" aria-labelledby="navToggleCommercial">
        <a class="dropdown-item" href="/Summary/Dashboard">Dashboard</a>
    </div>
</li>

这是对我有效的解决方案：

<li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" href="/Summary/Commercial" data-target="#navToggleCommercial" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
        Individual
    </a>
    <div class="dropdown-menu" id="navToggleCommercial">
        <a class="dropdown-item" href="/Summary/Dashboard">Dashboard</a>
    </div>
</li>

以下是适合我的解决方案

来自Bootstrap 4.1.3的代码片段

getSelectorFromElement: function getSelectorFromElement(element) {
    var selector = element.getAttribute('data-target');

    if (!selector || selector === '#') {
      selector = element.getAttribute('href') || '';
    }

    try {
      return document.querySelector(selector) ? selector : null;
    } catch (err) {
      return null;
    }
},

从Bootstrap 4.2.1中更换它

getSelectorFromElement: function getSelectorFromElement(element) {
  var selector = element.getAttribute('data-target');

  if (!selector || selector === '#') {
    var hrefAttr = element.getAttribute('href');
    selector = hrefAttr && hrefAttr !== '#' ? hrefAttr.trim() : '';
  }

  return selector && document.querySelector(selector) ? selector : null;
},

感谢PixemWeb github解决方案

---

有关更多信息，请访问bootstrap.js v4.2.1中的链接===

找到下面的块

getSelectorFromElement: function getSelectorFromElement(element) {
  var selector = element.getAttribute('data-target');

  if (!selector || selector === '#') {
    var hrefAttr = element.getAttribute('href');
    selector = hrefAttr && hrefAttr !== '#' ? hrefAttr.trim() : '';
  }

  return selector && document.querySelector(selector) ? selector : null;
},

只需按以下方式添加try-and-catch异常

替换

return selector && document.querySelector(selector) ? selector : null;

return e&&document.querySelector(e)?e:null

与

==bootstrap.min.js v4.2.1中的更改===

替换

return selector && document.querySelector(selector) ? selector : null;

return e&&document.querySelector(e)?e:null

与

---

正如其他人在评论中所说

---

这是Bootstrap 4.2.1中的一个错误，将在4.3.0中修复： github.com/twbs/bootstrap/issues/27903

只需要用户4.3.0的引导

把这个换掉

 <script src="https://cdn.rtlcss.com/bootstrap/v4.3.0/js/bootstrap.min.js" integrity="sha384-a9xOd0rz8w0J8zqj1qJic7GPFfyMfoiuDjC9rqXlVOcGO/dmRqzMn34gZYDTel8k" crossorigin="anonymous"></script>

用这个

<script src="https://cdn.rtlcss.com/bootstrap/v4.2.1/js/bootstrap.min.js" integrity="sha384-a9xOd0rz8w0J8zqj1qJic7GPFfyMfoiuDjC9rqXlVOcGO/dmRqzMn34gZYDTel8k" crossorigin="anonymous"></script>

由于document.querySelector找不到类似于“#home”的id，因此如果任何字符串不包含#前缀，则此函数将出错。 因此，请将其替换为：

selector = hrefAttr && hrefAttr !== '#' ? hrefAttr.trim() : '';

由此

selector = hrefAttr && hrefAttr.indexOf('#') === 0 ? hrefAttr.trim() : '';

---

确保下拉菜单项的锚点是

#

，而不是路径

解决方案：

---

我在

React

中使用链接而不是

a

，并用简单的

替换它。如果它是一个假锚，为什么要使用
？您只需使用
@fen1x即可。项目即将完成，我们无法返回或更改任何元素，因为项目包含100多页，在bootstrap 4.1.3之前工作正常。这是bootstrap 4.2.1中的一个错误，将在4.3.0中修复：正如错误通知单中提到的，有一个解决方法。。。这是Bootstrap 4.2.1中的一个bug，将在4.3.0中修复：github.com/twbs/Bootstrap/issues/27903I可以确认此解决方案在Bootstrap 4.3上有效。Bootstrap不计算在链接中。下拉切换除了#，这是可以理解的，但它有点削弱菜单，而我们想超越它的原生行为。在提交“npm run dist”之前，在/js/src/util/index.js中更改它。没有这样的版本。。它是一个自定义引导库，修复了一些RTL问题。。
selector = hrefAttr && hrefAttr.indexOf('#') === 0 ? hrefAttr.trim() : '';