Javascript 在子菜单页面上保持打开状态的垂直菜单下拉列表

Javascript 在子菜单页面上保持打开状态的垂直菜单下拉列表,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我一直在绞尽脑汁想如何让我的菜单子项在活动页面上保持打开状态。我在决议中也看到过类似的问题,但当我执行它们时,我似乎无法让它们发挥作用,所以我为之前被问到的问题道歉。我使用Jquery打开子菜单项,允许在任何时候打开和关闭多个子菜单项,唯一的问题是当单击子菜单项时,菜单将折叠,我希望在访问该页面时它保持打开状态。我在这里附加了一个JSFIDLE,这样您就可以直观地看到我的问题是什么。谢谢,非常感谢您的帮助 $(文档).ready(函数(e){ $('.has sub')。单击(函数(){ $(

我一直在绞尽脑汁想如何让我的菜单子项在活动页面上保持打开状态。我在决议中也看到过类似的问题,但当我执行它们时,我似乎无法让它们发挥作用,所以我为之前被问到的问题道歉。我使用Jquery打开子菜单项,允许在任何时候打开和关闭多个子菜单项,唯一的问题是当单击子菜单项时,菜单将折叠,我希望在访问该页面时它保持打开状态。我在这里附加了一个JSFIDLE,这样您就可以直观地看到我的问题是什么。谢谢,非常感谢您的帮助

$(文档).ready(函数(e){
$('.has sub')。单击(函数(){
$(this.toggleClass('open');
});
});
正文{
字体系列:无衬线;
}
.左导航{
宽度:250px;
/*更改为100%包含*/
背景颜色:灰色;
}
.左导航ul{
填充:0px;
}
.左导航李{
列表样式:无;
}
.左导航a{
显示:块;
填充:10px 0px 10px 20px;
文字装饰:无;
颜色:#fff;
}
/*隐藏子菜单项*/
.左导航{
显示:无;
}
/*给jquery一个目标*/
.左导航ul li.打开ul{
显示:块;
}
/*箭*/
.左导航。有子:前{
内容:'\203A';
浮动:对;
颜色:#fff;
边缘顶部:10px;
右边距:40px;
/*使它移动*/
变换:旋转(90度);
-webkit变换:旋转(90度);
-moz变换:旋转(90度);
}
.左导航李打开:前{
内容:'\2039';
}


因此,当用户使用单击子菜单项时,您需要做的是停止事件的传播

$(文档).ready(函数(e){
$('.has sub')。单击(函数(){
$(this.toggleClass('open');
});
//再加上这个
$('.has sub li a')。单击(函数(e){
e、 停止传播();
});
});
正文{
字体系列:无衬线;
}
.左导航{
宽度:250px;
/*更改为100%包含*/
背景颜色:灰色;
}
.左导航ul{
填充:0px;
}
.左导航李{
列表样式:无;
}
.左导航a{
显示:块;
填充:10px 0px 10px 20px;
文字装饰:无;
颜色:#fff;
}
/*隐藏子菜单项*/
.左导航{
显示:无;
}
/*给jquery一个目标*/
.左导航ul li.打开ul{
显示:块;
}
/*箭*/
.左导航。有子:前{
内容:'\203A';
浮动:对;
颜色:#fff;
边缘顶部:10px;
右边距:40px;
/*使它移动*/
变换:旋转(90度);
-webkit变换:旋转(90度);
-moz变换:旋转(90度);
}
.左导航李打开:前{
内容:'\2039';
}

使用方法和检查您正在单击的元素:

$(文档).ready(函数(){
$('.has sub')。单击(函数(e){
var val=$(e.target).parent();
if(val.is(“li”)和val.HASSCLASS(“has子”)){
$(val).toggleClass(“打开”);
}
})
})
正文{
字体系列:无衬线;
}
.左导航{
宽度:250px;
/*更改为100%包含*/
背景颜色:灰色;
}
.左导航ul{
填充:0px;
}
.左导航李{
列表样式:无;
}
.左导航a{
显示:块;
填充:10px 0px 10px 20px;
文字装饰:无;
颜色:#fff;
}
/*隐藏子菜单项*/
.左导航{
显示:无;
}
/*给jquery一个目标*/
.左导航ul li.打开ul{
显示:块;
}
/*箭*/
.左导航。有子:前{
内容:'\203A';
浮动:对;
颜色:#fff;
边缘顶部:10px;
右边距:40px;
/*使它移动*/
变换:旋转(90度);
-webkit变换:旋转(90度);
-moz变换:旋转(90度);
}
.左导航李打开:前{
内容:'\2039';
}


谢谢您的回复!我已经使用您提供的代码添加了stopPropagation,但不幸的是,它似乎没有做到这一点,这是它之前,然后在点击后发生的链接重定向到另一个页面?因为如果是这样,你必须在html中添加类,这样子项在加载新页面时保持打开状态。是的,它指向另一个页面,我需要添加哪个类?我正在慢慢地学习:P没关系。您需要将类“open”添加到子项所属的菜单项中。类似这样的内容
  • 。你有很多方法可以做到这一点,这取决于你用什么来构建页面。你能澄清一下你是只使用html还是一些后台框架吗?我很可能会把它添加到WordPress中——我已经在WordPress中使用了它,打开菜单,然后关闭,但它并没有保持打开状态!我已经测试了代码,谢谢!这管用!不幸的是,我不确定它是否适用于可湿性粉剂-这确实起到了作用!谢谢你的帮助!:)很抱歉打扰你,我对这件事还不太熟悉,还在努力想办法解决问题。我试过使用你给我的代码,但不幸的是没有