Question

我使用引导程序在我的网站上创建了一个帐户选项下拉菜单，它使用您的帐户图片作为按钮。问题是由于某种原因，当它运行时会创建一个 ::marker 元素，该元素在下拉列表旁边显示为黑色项目符号。我已将我的代码粘贴到一个片段中，当您运行它时，您可以看到完全相同的事情发生。我唯一的想法是使用一些 javascript 来删除这个元素，但我认为必须有更好的方法或我遗漏的东西。我已经搜索了一段时间的文档，尽管我承认没有那么仔细。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

<li class="nav-item dropdown">
  <a href="#" id="navbarDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <img id="acc" alt="Your Profile Picture" class="pfp" src="https://lh3.googleusercontent.com/a-/AAuE7mAJhsrc2jWxXLM1-t503rYNBj128tuqFiQUgSVI2dQ=k-s48"></img>
  </a>
  <div class="dropdown-menu" aria-labelledby="navbarDropdown">
    <a class="dropdown-item" href="#">Profile</a>
    <a class="dropdown-item" href="#">Account settings</a>
    <div class="dropdown-divider"></div>
    <a class="dropdown-item" href="#">Log out</a>
  </div>
</li>

Answer 1

这里的问题是我使用了“nav-item dropdown”类，而我应该只使用“dropdown”类，因为这不是导航栏的一部分。

Answer 2

你已经用 <li> 标签覆盖了 <ul> 标签并添加了这个 css：

li {
    list-style-type: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

<ul>
<li class="nav-item dropdown">
    <a href="#" id="navbarDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      <img id="acc" alt="Your Profile Picture" class="pfp" src="https://lh3.googleusercontent.com/a-/AAuE7mAJhsrc2jWxXLM1-t503rYNBj128tuqFiQUgSVI2dQ=k-s48"></img>
    </a>
  <div class="dropdown-menu" aria-labelledby="navbarDropdown">
    <a class="dropdown-item" href="#">Profile</a>
    <a class="dropdown-item" href="#">Account settings</a>
    <div class="dropdown-divider"></div>
    <a class="dropdown-item" href="#">Log out</a>
  </div>
</li>
</ul>

如何删除引导程序下拉菜单中的“标记”元素？

2 个答案: