艾利百科--临沂网站制作,临沂网页设计,临沂微信公众号,兼容并蓄,开放共赢!

艾利百科

当前位置: 主页 > 网站制作 > Bootstrap >

Bootstrap顶部导航栏添加下拉菜单后链接无法点击

时间:2018-06-11 13:06来源:未知 作者:kunbeatable 点击:
菜单栏添加了下拉菜单后,原本文字的超链接失效原因:data-toggle=dropdown,对应在bootstrap.min.js中有关这个函数会对其点击时进行JS监听执行,在菜单栏时删掉这个属性,即去掉JS的监听可实现跳转。这样导致BS默认的通过点击实现下拉菜单的功能被取消,此时
菜单栏添加了下拉菜单后,原本文字的超链接失效原因:data-toggle="dropdown",对应在bootstrap.min.js中有关这个函数会对其点击时进行JS监听执行,在菜单栏时删掉这个属性,即去掉JS的监听可实现跳转。这样导致BS默认的通过点击实现下拉菜单的功能被取消,此时需要使用jQuery重新编写下拉菜单出现事件。通常此种情况下用在鼠标掠过出现时下拉菜单并且下拉子栏目及其上级栏目均有链接效果下使用。相当于完全摒弃了BS提供的dropdown下拉菜单插件。

例如:
<div id="menuContainer">
    <div id="menu">
        <div class="navbar">
            <ul class="nav">
                <li><a href="#" style="color:#ffffff;">首页</a></li>                    
                <li><a href="#"  style="color:#ffffff;">学习</a></li>
                <li><a href="#" style="color:#ffffff;">娱乐工具</a></li>
                <li><a href="#" style="color:#ffffff;">游戏</a></li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" style="color:#ffffff;" >个人主页<b class="caret"></b></a>
                    <!--data-toggle="dropdown"删掉这个属性-->
                    <ul class="dropdown-menu">
                        <li><a href="#">历史操作</a></li>
                        <li><a href="#">团队信息</a></li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
    <div class="clear"></div>
</div>

关于data-toggle="dropdown"的相关问题。
data-toggle="dropdown"在BS中调用了dropdown.js插件实现下拉菜单的功能。
 
顶一下
(0)
0%
踩一下
(0)
0%
------分隔线----------------------------
发表评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
评价:
表情:
用户名: 验证码:点击我更换图片