Jquery 下拉菜单出现问题_Jquery_Html_Css

Jquery 下拉菜单出现问题

jquery html css

Jquery 下拉菜单出现问题,jquery,html,css,Jquery,Html,Css,几周来，我一直在做一个Web应用程序项目，目前正在做一个下拉菜单。除了以下两点外，它工作得相当好：当我通过单击其中一个主要项目来展开菜单时，我希望避免绿色也在其他子菜单的级别上展开，例如，通过单击菜单1，我不希望在菜单2和菜单3下方出现绿色块我还想把我的物品做大一些。但当我激活填充时：14px 16px；在CSS代码中的菜单li级别，子菜单项以错误的方式移动。你能帮我解决这些问题吗？谢谢圣菲代码如下： $function{ //隐藏子菜单： $.subMenu.hide； //隐藏

几周来，我一直在做一个Web应用程序项目，目前正在做一个下拉菜单。除了以下两点外，它工作得相当好：

当我通过单击其中一个主要项目来展开菜单时，我希望避免绿色也在其他子菜单的级别上展开，例如，通过单击菜单1，我不希望在菜单2和菜单3下方出现绿色块我还想把我的物品做大一些。但当我激活填充时：14px 16px；在CSS代码中的菜单li级别，子菜单项以错误的方式移动。你能帮我解决这些问题吗？谢谢

圣菲

代码如下：

$function{ //隐藏子菜单： $.subMenu.hide； //隐藏屏幕的元素： $B3 th，B3 td.hide； $[id^='B4\'].隐藏； $[id^='B5.'].hide； //单击菜单项后隐藏/显示子菜单： $.mainlink.clickfunction{ $.subMenu.hide； $B3 th，B3 td.hide； $[id^='B4\'].隐藏； $[id^='B5.'].hide； $.level1.css背景颜色，绿色； $.level2.css背景颜色，橙色； $this.parent.cssbackground颜色，红色； $this.parent.find.subMenu.toggle slow，函数{ //动画完成。 }; }; //单击子菜单项后隐藏/显示屏幕主体的元素： //请求/创建 $item1\u 1.单击功能{ $子菜单li.cssbackground颜色，橙色； $this.parent.cssbackground颜色，红色； $[id^='B5.'].hide； $[id='B5_1'].show； }; //请求/搜索 $item1_2.单击功能{ $子菜单li.cssbackground颜色，橙色； $this.parent.cssbackground颜色，红色； $[id^='B5.'].hide； $[id='B5_2'].show； }; //文件夹/报告/创建文件夹 $item2\u 1.单击功能{ $子菜单li.cssbackground颜色，橙色； $this.parent.cssbackground颜色，红色； $[id^='B5.'].hide； $[id='B5_3'].show； }; //文件夹/报表/创建报表 $item2\u 2.单击函数{ $子菜单li.cssbackground颜色，橙色； $this.parent.cssbackground颜色，红色； $[id^='B5.'].hide； $[id='B5_4'].show； }; //文件夹/报告/搜索 $item2\u 3.单击功能{ $子菜单li.cssbackground颜色，橙色； $this.parent.cssbackground颜色，红色； $[id^='B5.'].hide； $[id='B5_5'].show； }; }; 身体{ 背景色：3e8cbd； } 标题{ 边框样式：实心；保证金：0； } 页脚{ 边框样式：实心；保证金：0； } 菜单ul{ 显示器：flex；列表样式类型：无；填充：0； } 菜单里{ 宽度：10em；颜色：白色；文本对齐：居中；右边框：1px实心bbb；边框顶部：1个实心bbb；背景颜色：绿色； /*填充：14px 16px*/ } 菜单李：最后一个孩子{ 边界权：无； } 菜单{ 弯曲方向：立柱；填充：0； } 菜单李莉{ 背景颜色：橙色； } 菜单1 子菜单1-1 子菜单1-2 菜单2 子菜单2-1 子菜单2-2 子菜单2-3 菜单3

您好，请更新下面的css和js在您的代码，它会来任何你想要的

$function{ //隐藏子菜单： $.subMenu.hide； //隐藏屏幕的元素： $B3 th，B3 td.hide； $[id^='B4\'].隐藏； $[id^='B5.'].hide； //单击菜单项后隐藏/显示子菜单： $.mainlink.clickfunction{ $.level1.css背景颜色，绿色； $.level2.css背景颜色，橙色； $this.parent.cssbackground颜色，红色； $this.parentli.find.subMenu.slideToggle慢速，函数{ //动画完成。 }; }; //单击子菜单项后隐藏/显示屏幕主体的元素： //请求/创建 /* $item1\u 1.单击功能{ $子菜单li.cssbackground颜色，橙色； $this.parent.cssbackground颜色，红色； $[id^='B5.'].hide； $[id='B5_1'].show； }; //请求/搜索 $item1_2.单击功能{ $子菜单li.cssbackground颜色，橙色； $this.parent.cssbackground颜色，红色； $[id^='B5.'].hide； $[id='B5_2'].show； }; //文件夹/报告/创建文件夹 $item2\u 1.单击功能{ $子菜单li.cssbackground颜色，橙色； $this.parent.cssbackground颜色，红色； $[id^='B5.'].hide； $[id='B5_3'].show； }; //文件夹/报表/创建报表 $item2\u 2.单击函数{ $子菜单li.cssbackground颜色，橙色； $this.parent.cssbackground颜色，红色； $[id^='B5.'].hide； $[id='B5_4'].show； }; //文件夹/报告/搜索 $item2\u 3.单击功能{ $子菜单li.cssbackground颜色，橙色； $this.parent.cssbackground颜色，红色； $[id^='B5.'].hide； $[id='B5_5'].show； }; */ }; 标题{ 边框样式：实心；保证金：0； } 页脚{ 边框样式：实心；保证金：0； } 菜单ul{ 显示：块；列表样式类型：无；填充：0； } 菜单里{ 宽度：10em；颜色：白色；显示：内联块；浮动：左；宽度：150px；高度：35px；线高：35px；文本对齐：居中；右边框：1px实心bbb；边框顶部：1个实心bbb；背景颜色：绿色； /*填充：14px 16px*/ } 菜单李乌丽{ 填充：7px 32px；宽度：自动；高度：自动； } 菜单李：最后一个孩子{ 边界权：无； } 菜单{ 弯曲方向：立柱；填充：0； } 菜单l 伊莉{ 背景颜色：橙色；

} 您好，请更新下面的css和js在您的代码，它会来任何你想要的

相反，我将大部分样式移到了语法中，并使用一个链接将样式链接到按钮，从而消除了一直查找元素的需要

//不需要一直使用jQuery来查找这些 var menuAnchors=$'菜单>li>a'；//缓存顶级锚点变量按钮=$input[id^='B5\']；//缓存所有按钮 //为所有菜单>li>a声明一次单击处理程序 $'菜单'。单击，'>li>a'，函数{ menuAnchors.css'background-color'，；//将红色重置为绿色 this.style.backgroundColor='red'；//锚元素在单击时获得红色背景 $.subMenu.hide.reset；//隐藏所有子菜单 $this.next.subMenu.toggleslow，函数{}；//显示最近的下一个子菜单 }; //为所有子菜单锚声明一次单击处理程序 $'.subMenu'。单击，函数E{ $this.reset； e、 target.style.backgroundColor='red'；//目标锚点设置为红色 var buttonId=$e.target.data'button'；//从数据属性获取buttonId $+buttonId.show； }; //自定义隐藏和重置背景为橙色的功能 $.fn.reset=函数{ buttons.hide；//隐藏所有按钮 $this.find'a'.css'background-color'，；//将红色重置为橙色退还$this； } 身体{ 背景色：3e8cbd； } 保险商实验室{ 显示器：flex；列表样式类型：无；填充：0； } 菜单里{ 宽度：10em；颜色：白色；文本对齐：居中； } 菜单李a{ 显示：块；填充：14px 16px；光标：指针；背景颜色：绿色；右边框：1px实心bbb；边框顶部：1个实心bbb； } 菜单李：最后一个孩子{ 边界权：无； } .子菜单{ 弯曲方向：立柱；填充：0；显示：无； } 菜单.子菜单a{ 背景颜色：橙色； } B5输入{ 显示：无； } 菜单1 子菜单1-1 子菜单1-2 菜单2 子菜单2-1 子菜单2-2 子菜单2-3 菜单3 在此处使用位置：绝对或相对将不起作用，因为菜单将与按钮重叠

相反，我将大部分样式移到了语法中，并使用一个链接将样式链接到按钮，从而消除了一直查找元素的需要

//不需要一直使用jQuery来查找这些 var menuAnchors=$'菜单>li>a'；//缓存顶级锚点变量按钮=$input[id^='B5\']；//缓存所有按钮 //为所有菜单>li>a声明一次单击处理程序 $'菜单'。单击，'>li>a'，函数{ css'background-color'；//将红色重置为绿色 N this.style.backgroundColor='red'；//锚元素在单击时获得红色背景 $.subMenu.hide.reset；//隐藏所有子菜单 $this.next.subMenu.toggleslow，函数{}；//显示最近的下一个子菜单 }; //为所有子菜单锚声明一次单击处理程序 $'.subMenu'。单击，函数E{ $this.reset； e、 target.style.backgroundColor='red'；//目标锚点设置为红色 var buttonId=$e.target.data'button'；//从数据属性获取buttonId $+buttonId.show； }; //自定义隐藏和重置背景为橙色的功能 $.fn.reset=函数{ buttons.hide；//隐藏所有按钮 $this.find'a'.css'background-color'，；//将红色重置为橙色退还$this； } 身体{ 背景色：3e8cbd； } 保险商实验室{ 显示器：flex；列表样式类型：无；填充：0； } 菜单里{ 宽度：10em；颜色：白色；文本对齐：居中； } 菜单李a{ 显示：块；填充：14px 16px；光标：指针；背景颜色：绿色；右边框：1px实心bbb；边框顶部：1个实心bbb； } 菜单李：最后一个孩子{ 边界权：无； } .子菜单{ 弯曲方向：立柱；填充：0；显示：无； } 菜单.子菜单a{ 背景颜色：橙色； } B5输入{ 显示：无； } 菜单1 子菜单1-1 子菜单1-2 菜单2 子菜单2-1 子菜单2-2 子菜单2-3 菜单3

要避免菜单下方出现绿色，应在子菜单中使用position:absolute。position:absolute将使菜单与按钮重叠要避免菜单下方出现绿色，应在子菜单中使用position:absolute。position:absolute将使菜单与按钮重叠

#main li {padding: 14px 16px; position:relative;}
.subMenu {position:absolute;top:100%;left:0;}