Jquery 不再悬停时保持css悬停效果

我有一个问题，一个按钮，作为导航栏的功能，点击时，切换下拉菜单。现在，当我浏览下拉菜单或完全离开下拉菜单时，我希望按钮悬停效果保持不变，直到我再次关闭下拉菜单

我查看了这件事的所有反馈，但似乎都没有效果，非常感谢您的帮助

$（文档）.ready（函数（）{
$（文档）。在（“单击”）上，函数（事件）{
var$trigger=$（“.dropdown”）；
if（$trigger！==event.target&！$trigger.has（event.target.length）{
$（“#我的下拉菜单”）.slideUp（“慢”）；
}
});
$（“#下拉内容”）.change（函数（）{
$（“.one”）.hide（）；
});
});
。下拉列表{
宽度：60px；
高度：120px；
顶部：20px；
左：40px；
位置：相对位置；
显示：内联块；
}
.dropbtn分区{
高度：8px；
背景色：#808080；
利润率：8px0；
边界半径：25px；
位置：相对位置；
z指数：20；
}
.dropbtn{
边界：无；
背景色：#fff；
光标：指针；
}
.一{
宽度：8px；
过渡：0.7s；
}
.二{
宽度：8px；
过渡：0.9s；
}
.三{
宽度：8px；
过渡：1.1s；
}
.dropbtn:悬停，一{
宽度：60px；
}
悬停，两个{
宽度：60px；
}
悬停，三点{
宽度：60px；
}
.dropbtn:焦点{
大纲：0；
}
.下拉内容{
显示：无；
位置：绝对位置；
背景色：#f1f1；
最小宽度：160px；
盒影：0px 8px 16px 0px rgba（0,0,0,0.2）；
z指数：1；
}
.下拉内容a{
颜色：黑色；
填充：12px 16px；
文字装饰：无；
显示：块；
}
.下拉列表内容a：悬停{
背景色：#ddd
}
您可以在单击时添加一个类以保持悬停状态：


$（文档）.ready（函数（）{
$（文档）。在（“单击”）上，函数（事件）{
var$trigger=$（“.dropdown”）；
if（$trigger！==event.target&！$trigger.has（event.target.length）{
$（“#我的下拉菜单”）.slideUp（“慢”）；
$（'.dropbtn'）.removeClass（'active'）；
}
});
$（“#下拉内容”）.change（函数（）{
$（“.one”）.hide（）；
});
});
。下拉列表{
宽度：60px；
高度：120px；
顶部：20px；
左：40px；
位置：相对位置；
显示：内联块；
}
.dropbtn分区{
高度：8px；
背景色：#808080；
利润率：8px0；
边界半径：25px；
位置：相对位置；
z指数：20；
}
.dropbtn{
边界：无；
背景色：#fff；
光标：指针；
}
.一{
宽度：8px；
过渡：0.7s；
}
.二{
宽度：8px；
过渡：0.9s；
}
.三{
宽度：8px；
过渡：1.1s；
}
.dropbtn:hover.1，
.dropbtn.active.1{
宽度：60px；
}
悬停，两个，
.dropbtn.active.2{
宽度：60px；
}
悬停，三点，
.dropbtn.active.3{
宽度：60px；
}
.dropbtn:焦点{
大纲：0；
}
.下拉内容{
显示：无；
位置：绝对位置；
背景色：#f1f1；
最小宽度：160px；
盒影：0px 8px 16px 0px rgba（0,0,0,0.2）；
z指数：1；
}
.下拉内容a{
颜色：黑色；
填充：12px 16px；
文字装饰：无；
显示：块；
}
.下拉列表内容a：悬停{
背景色：#ddd
}
我想说，阻止汉堡包菜单崩溃的最简单方法是添加一个类，该类将宽度设置为60px，并在单击后删除该类，从而获得所需的效果

我稍微修改了你的代码片段


$（文档）.ready（函数（）{
var$trigger=$（“.dropdown”）；//缓存元素
$（文档）。在（“单击”）上，函数（事件）{
$trigger.addClass（'active'）；//添加设置子元素宽度的类
if（$trigger！==event.target&！$trigger.has（event.target.length）{
$（“#我的下拉菜单”）.slideUp（“慢”）；
$trigger.removeClass（'active'）；//删除类以将其返回到原始宽度
}
});
$（“#下拉内容”）.change（函数（）{
$（“.one”）.hide（）；
});
});
。下拉列表{
宽度：60px；
高度：120px；
顶部：20px；
左：40px；
位置：相对位置；
显示：内联块；
}
.dropbtn分区{
高度：8px；
背景色：#808080；
利润率：8px0；
边界半径：25px；
位置：相对位置；
z指数：20；
}
.dropbtn{
边界：无；
背景色：#fff；
光标：指针；
}
.一{
宽度：8px；
过渡：0.7s；
}
.二{
宽度：8px；
过渡：0.9s；
}
.三{
宽度：8px；
过渡：1.1s；
}
.dropbtn:悬停，一{
宽度：60px；
}
悬停，两个{
宽度：60px；
}
悬停，三点{
宽度：60px；
}
.现役部队{
宽度：60px；/*这将为您设置子div宽度*/
}
.dropbtn:焦点{
大纲：0；
}
.下拉内容{
显示：无；
位置：绝对位置；
背景色：#f1f1；
最小宽度：160px；
盒影：0px 8px 16px 0px rgba（0,0,0,0.2）；
z指数：1；
}
.下拉内容a{
颜色：黑色；
填充：12px 16px；
文字装饰：无；
显示：块；
}
.下拉列表内容a：悬停{
背景色：#ddd
}