当前位置:首页 > BootStrap > 正文内容
三月31日

时间:2016-03-31 11:21

解决Bootstrap下拉菜单不可点击

0
分类:BootStrap | 评论:0人 | 浏览:73次   
如果你的wordpress主题使用了Bootsrtap框架,在使用Bootstrap菜单组件时,如果你的菜单带有下拉菜单,那么这个带下拉菜单的导航在点击时只会浮出下拉菜单,它本身的href属性会失效,也就是失去了超链接功能,如果希望菜单栏的链接可以正常打开,该怎么做呢。
在主题的js文件中加入如下代码即可:
  1. [js]
  2. $(document).on("click",".dropdown-toggle",function(){
  3. if($(this).attr(‘href’)) window.location = $(this).attr(‘href’);
  4. });
  5. [/js]

以上代码的意思是,点击菜单选项时,如果当前选项具有“href”属性,那么点击它时页面跳转至href属性所链接的页面。

可如果我们的主题是响应式主题,在手机端浏览的时候,我们希望点击菜单时不跳转,而是bootstrap默认的行为(出现下拉菜单),该如何操作呢?只要在上面的js代码中加上一个判断语句即可:

  1. 
    
  2. $(document).on("click",".dropdown-toggle",function(){
  3. if( $(window).width() > 767 )
  4. if($(this).attr(‘href’)) window.location = $(this).attr(‘href’);
  5. });
  6. [/js]

[js]

以上代码的意思是,在设备宽度超过767像素的时候,点击菜单才会跳转,而小于等于767像素时并不执行语句。

来源:Dashu.info(微信号/QQ号:43318553),转载请注明出处,谢谢!

  • 评论:(0)
  • 有图有真相

站内搜索

css.php

无觅相关文章插件,快速提升流量