twitter bootstrap dropdown-toggle禁用无效

时间:2013-10-03 19:33:45

标签: twitter-bootstrap

禁用部分在下拉切换中无效。这是代码。

       <div class="nav-collapse collapse">
            <ul class="nav">
                <li class="divider-vertical"></li>
                <li><a href="index.html">HOME</a></li>
                <li class="divider-vertical"></li>
                <li><a href="about.html">ABOUT ME</a></li>
                <li class="divider-vertical"></li>
                <li class="dropdown">
                <a class="dropdown-toggle" data-toggle="dropdown" href="gallery.html">GALLERY
                <b class="caret"></b></a>
                    <ul class="dropdown-menu">
                      <li><a href="units.html">Unit &amp; Events</a></li>
                      <li><a href="personal.html">Personal</a></li>
                    </ul>
                    </li>
                    <li class="divider-vertical"></li>
                    <li><a href="#"></a></li>
                    <li class="divider-vertical"></li>
                 <li><a href="contact.html">CONTACT</a></li>
                    <li class="divider-vertical"></li>
            </ul>
         </div>

1 个答案:

答案 0 :(得分:1)

当您在菜单中禁用链接时,您必须将class =“disabled”添加到列表项,而不是锚点。

即使禁用了列表项,链接仍将处于活动状态,因此您必须使用javascript或服务器端语言来阻止链接触发。如果您正在动态生成列表,则可以将锚点的href设置为href =“#”,或者也可以使用javascript执行相同操作。

http://getbootstrap.com/components/#dropdowns-disabled

                <li class="disabled"><a href="#" title="Disabled Link">HOME</a></li>
                <li><a href="about.html">ABOUT ME</a></li>

jQuery示例:

$('li.disabled > a:link').on('click', function(e) { 
  e.preventDefault(); 
});