logo标签列表

未捕获的类型错误：无法读取未定义的属性 'setAttribute'，位于Object.onLoad。

javascriptbootstrap-4dropdownsemantic-uipopper.js
20

有什么想法可能导致这个错误吗？

我的包含文件列表：

<link rel="stylesheet" href="../../node_modules/semantic-ui/dist/semantic.min.css">
<link rel="stylesheet" href="../../node_modules/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="../../node_modules/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="../../node_modules/fullcalendar/dist/fullcalendar.min.css">
<script src="../../node_modules/semantic-ui/dist/semantic.min.js"></script>
<script src="../../node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="../../node_modules/moment/min/moment.min.js"></script>
<script src="../../node_modules/fullcalendar/dist/fullcalendar.min.js"></script>

HTML元素：

<div class="ui floating dropdown labeled search icon button" style="width: 95%; margin: 0 auto;" id="monthDrop">
    <i class="calendar icon"></i>
    <span class="text">Choose a Month</span>
    <div class="menu">
                <div class="item">January</div>
                <div class="item">February</div>
                <div class="item">March</div>
                <div class="item">April</div>
                <div class="item">May</div>
                <div class="item">June</div>
                <div class="item">July</div>
                <div class="item">August</div>
                <div class="item">September</div>
                <div class="item">October</div>
                <div class="item">November</div>
                <div class="item">December</div>
    </div>
</div>

脚本：

$('#monthDrop').dropdown();

它的渲染效果很好，加载时没有出现任何错误，但当我尝试单击它时，就会出现这种情况：

在此输入图片描述

1
看起来问题可能出在 popper.js 上，它似乎被 dropdown.js 调用，但根据您发布的代码，两者都没有被加载 - 所以，这本身就是个谜。 - Jaromanda X
6个回答
36

我们在处理以下HTML时遇到了相同的错误：

<select class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" role="button" v-model="selected" aria-haspopup="true" aria-expanded="false">
    <option disabled value="">Please select one</option>
    <option class="dropdown-item" value="type1">Carrier</option>
    <option class="dropdown-item" value="type2">Shipper</option>
</select>

我们尝试将<select>标签中的data-toggle="dropdown"移除；错误不再出现，下拉菜单仍然可用。不确定为什么这样可以解决问题，但对我们来说确实消除了错误。可能是某种冲突吗？总之，如果有人正在寻找解决方案，这种方法可能会对他们有用。

1
一针见血 - VivekDev
1
谢谢，这将是你花费整个晚上的事情之一。 - Bastiyan
6
我在使用Bootstrap 4.x时遇到了相同的错误，因为我的下拉菜单与我使用的下拉按钮不属于同一个父元素。 

<span class="project-sort-by">Sort by: <a class="dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Recent</a></span>

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

这不起作用是因为dropdown.js代码使用以下代码查找菜单： 

  _getMenuElement() {
    if (!this._menu) {
      const parent = Dropdown._getParentFromElement(this._element)

      if (parent) {
        this._menu = parent.querySelector(SELECTOR_MENU)
      }
    }
    return this._menu
  }

要解决这个问题，请将菜单移动到与开关相同的父级。

<span class="project-sort-by">Sort by: 
    <a class="dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Recent</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>
</span>

3

CSS框架

首先，您需要选择使用Bootstrap 4还是Semantic-UI，因为这两个是不同的CSS框架，同时使用它们会很混乱。

Bootstrap 4

假设您选择了Bootstrap 4，因为它更简单易学，特别适合初学者（当然，您也可以选择Semantic-UI、Foundation或其他任何框架），您应该在代码中加入以下两个脚本：jQuery和Popper.js。

从Bootstrap文档中可以找到：

我们的许多组件需要使用JavaScript才能正常工作。具体来说，它们需要jQuery、Popper.js和我们自己的JavaScript插件。

下拉菜单

同样可以在文档中找到：

下拉菜单是基于第三方库Popper.js构建的，它提供动态定位和视口检测。请确保在Bootstrap的JavaScript之前包含popper.min.js，或者使用bootstrap.bundle.min.js / bootstrap.bundle.js，其中包含Popper.js。在导航栏中不使用Popper.js来定位下拉菜单，因为不需要动态定位。

当您决定使用哪个CSS框架时，您将能够以正确的方式设置下拉菜单。为了更好地了解，您还应该查看Semantic-UI关于下拉菜单的文档。

NodeJS环境!=浏览器JavaScript环境

我看到您通过npm安装脚本，但我不确定这是否是您想要的。简而言之：

npm是Node.js软件包管理器

我猜您现在想做的是只在本地文件夹中拥有这些软件包的简单版本，比如./project_name/javascript/bootstrap.js或./project_name/css/bootstrap.min.css，并且您现在没有必要拥有node_modules。但是，当然，如果您愿意，也可以这样做。

您可以在这里找到有关Node和JavaScript的许多有用评论。

2
错误的原因是您放置元素的位置不正确。以上任何答案都不能解决我的问题。
错误放置1
<span class="project-sort-by">Sort by: <a class="dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Recent</a></span>

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

错误的放置位置2

<span class="project-sort-by">Sort by: 
    <a class="dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Recent</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>
</span>

正确的放置

<span class="dropdown project-sort-by">Sort by: 
    <a class="dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Recent</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>
</span>
1

删除data-toggle =“dropdown”对我没有用，因为Bootstrap 4.x要求下拉菜单使用该属性。

然而，在类似的问题中，我发现我使用的第三方插件已经删除了一个名为removeAttr的函数。当我将其更改为prop时，问题得到解决。不再出现错误。

0

请将semanticUI链接放在bootstrap链接下方

<link rel="stylesheet" href="../../node_modules/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="../../node_modules/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="../../node_modules/semantic-ui/dist/semantic.min.css">
<link rel="stylesheet" href="../../node_modules/fullcalendar/dist/fullcalendar.min.css">
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接