Question

我正在一个项目上，我开始在 bootstrap 4.0.0 上构建。在该项目期间，每当新版本的Bootstrap（4.1.0，4.1.3）问世时，我都会定期更新Bootstrap，并且一切运行正常，直到我从那里更新到 Bootstrap 4.2.1 为止。单击文档时，我在控制台中遇到错误

未捕获的DOMException：无法在上执行“ 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>

这是我的codepen

Answer 1

我遇到了这个问题，对此reported issue的评论将我带入了解决方案。我是从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>

Answer 2

这是最适合我的解决方案

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

有关更多信息，请参见链接https://github.com/twbs/bootstrap/issues/27903#issuecomment-449600715

Answer 3

getSelectorFromElement: function getSelectorFromElement(element) {
            var selector = element.getAttribute('data-target');
            if (!selector || selector === '#') {
                var hrefAttr = element.getAttribute('href');

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

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

此函数由于document.querySelector导致错误而找不到ID，例如“ #home”，因此，如果有任何字符串不包含＃，则通过错误对其进行前缀。因此，将其替换：

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

从这里

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

Answer 4

建议：

删除空的href属性并添加cursor:pointer样式以使A元素可点击。

#dropdownMenuLink {
  cursor: pointer; /* not necessary for Bootstrap */
  color: white /* change if you want */
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">

<div class="dropdown">
  <a class="btn btn-secondary dropdown-toggle" 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>

<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://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.bundle.min.js" integrity="sha384-3ziFidFTgxJXHMDttyPJKDuTlmxJlwbSkojudK/CkRqKDOmeSbN6KLrGdrBQnT2n" crossorigin="anonymous"></script>

Answer 5

确保下拉菜单项的锚点是 AzureJobFoo: "success" TracisCIJobBar: "pending" SomeJob: "failed" 而不是路径。

解决办法：我在 # 中使用 Link 而不是 a 并将其替换为简单的 React，现在可以正常工作了。

Answer 6

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

使用

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

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

替换

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

使用

try{return e&&document.querySelector(e)?e:null}catch(err){return null;}

Answer 7

如其他人在评论中所说

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

Bootstrap 4.2.1-无法在'Document'上执行'querySelector'：'javascript：void（0）;'不是有效的选择器

7 个答案: