Question

我在jsp中有以下代码段。

<li id="report" class="dropdown open"><a data-toggle="dropdown" class="dropdown-toggle" href="#">Report <b class="caret"></b></a>
    <ul class="dropdown-menu">
              <li ><a href="#">Action</a></li>
              <li><a href="#">Another action</a></li>
              <li><a href="#">Something else here</a></li>
              <li class="divider"></li>
              <li class="nav-header">Nav header</li>
              <li style=""><a href="#">Separated link</a></li>
              <li><a href="#">One more separated link</a></li>
    </ul>
</li>

但是当它在浏览器中呈现时，代码自动变为如下：

<li id="report" class="dropdown open"><a data-toggle="dropdown" class="dropdown-toggle" href="#">Report <b class="caret"></b></a>
    <ul class="dropdown-menu">
              <li style="display: none;"><a href="#">Action</a></li>
              <li style="display: none;"><a href="#">Another action</a></li>
              <li style="display: none;"><a href="#">Something else here</a></li>
              <li class="divider" style="display: none;"></li>
              <li class="nav-header" style="display: none;">Nav header</li>
              <li style="display: none;"><a href="#">Separated link</a></li>
              <li style="display: none;"><a href="#">One more separated link</a></li>
    </ul>
</li>

我无法理解所有li的所有内容都是这个样式=“display：none”属性，是不是它正在做一些bootstrap javascript。我正在调试chrome上的代码。

Answer 1

我无法跟踪，哪些js正在对我的列表进行更改，所以我做的是，我把每个li放在一个名为'visible'的类中，在我的标签中我放了一个样式如下：

<style>
.visible{

display:inline !important;
}
</style>

Answer 2

这是完全正常的：添加样式是为了在没有点击相关按钮时隐藏下拉菜单。该控件由JavaScript执行（检查bootstrap.js）。

Answer 3

这个问题发生在 Magento（对我来说是 1.9 版）中，它是由 Protype JS 库和 jQuery 之间的不兼容引起的。有一个修复here。

bootstrap：style =“display：none”get自动附加在'li'中

3 个答案: