15621857753

Bootstrap下拉菜单无法点击怎么解决

来源:齐鲁建站 栏目:建站教程 阅读: 日期:2021-11-27

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

如果你的wordpress主题使用了Bootsrtap框架,在使用Bootstrap菜单组件时,如果你的菜单带有下拉菜单,那么这个带下拉菜单的导航在点击时只会浮出下拉菜单,它本身的href属性会失效,也就是失去了超链接功能,如果希望菜单栏的链接可以正常打开,该怎么做呢。

在主题的js文件中加入如下代码即可:

[js]
$(document).on("click",".dropdown-toggle",function(){
if($(this).attr(‘href’)) window.location = $(this).attr(‘href’);
});
[/js]

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

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

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

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

响应式网站建设

TAG: 下拉菜单
展开