下拉菜单出现问题

问题描述：

几个星期以来，我一直在研究一个Web应用程序项目，我目前正在研究一个下拉菜单。除了以下两点之外，它的效果还是不错的：下拉菜单出现问题

当我通过点击其中一个主要项目来推出菜单时，我想避免在其他子菜单的层次上展开绿色，菜单（例如通过点击“菜单1”我不希望绿色块出现在“菜单2”和“菜单3”下面）
我也想让我的项目更大。但是当我激活“填充：14px 16px;”在CSS代码中的#menu li级别，子菜单项会以不好的方式移动。

你能帮我解决这些问题吗？谢谢！

斯特凡

下面是代码：

$(function() { 
 
// Hide sub-menu: 
 
$(".subMenu").hide(); 
 
// Hide elements of the screen: 
 
$("#B3 th, #B3 td").hide(); 
 
$("[id^='B4_']").hide(); 
 
$("[id^='B5_']").hide(); 
 
// Hide/Display sub-menu once menu item is clicked: 
 
$(".mainlink").click(function() { 
 
\t $(".subMenu").hide(); 
 
    $("#B3 th, #B3 td").hide(); 
 
    $("[id^='B4_']").hide(); 
 
    $("[id^='B5_']").hide(); 
 
\t $(".level1").css("background-color","green"); 
 
\t $(".level2").css("background-color","orange"); 
 
\t $(this).parent().css("background-color","red"); 
 
    \t $(this).parent().find(".subMenu").toggle("slow", function() { 
 
\t \t // Animation complete. 
 
\t }); 
 

 
}); 
 

 
// Hide/Display elements of the body of the screen once sub-menu item is clicked: 
 
// Request/Create 
 
$("#item1_1").click(function() { 
 
$(".subMenu li").css("background-color","orange"); 
 
$(this).parent().css("background-color","red"); 
 
$("[id^='B5_']").hide(); 
 
$("[id='B5_1']").show(); 
 
}); 
 
// Request/Search 
 
$("#item1_2").click(function() { 
 
$(".subMenu li").css("background-color","orange"); 
 
$(this).parent().css("background-color","red"); 
 
$("[id^='B5_']").hide(); 
 
$("[id='B5_2']").show(); 
 
}); 
 
// Folder/Report/Create folder 
 
$("#item2_1").click(function() { 
 
$(".subMenu li").css("background-color","orange"); 
 
$(this).parent().css("background-color","red"); 
 
$("[id^='B5_']").hide(); 
 
$("[id='B5_3']").show(); 
 
}); 
 
// Folder/Report/Create report 
 
$("#item2_2").click(function() { 
 
$(".subMenu li").css("background-color","orange"); 
 
$(this).parent().css("background-color","red"); 
 
$("[id^='B5_']").hide(); 
 
$("[id='B5_4']").show(); 
 
}); 
 
// Folder/Report/Search 
 
$("#item2_3").click(function() { 
 
$(".subMenu li").css("background-color","orange"); 
 
$(this).parent().css("background-color","red"); 
 
$("[id^='B5_']").hide(); 
 
$("[id='B5_5']").show(); 
 
}); 
 
});

body { 
 
\t background-color: #3e8cbd; 
 
} 
 

 
header { 
 
\t border-style: solid; 
 
\t margin: 0; 
 
} 
 

 
footer { 
 
\t border-style: solid; 
 
\t margin: 0; 
 
} 
 

 
#menu ul { 
 
\t display: flex; 
 
    list-style-type: none; 
 
    padding: 0; 
 
} 
 

 
#menu li { 
 
\t width: 10em; 
 
\t color: white; 
 
\t text-align: center; 
 
\t border-right: 1px solid #bbb; 
 
\t border-top: 1px solid #bbb; 
 
\t background-color: green; 
 
\t /*padding: 14px 16px;*/ 
 
} 
 

 
#menu li:last-child { 
 
    border-right: none; 
 
} 
 

 
#menu ul ul { 
 
\t flex-direction: column; 
 
\t padding: 0; 
 
} 
 

 
#menu li li { 
 
\t background-color: orange; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<body> 
 

 
<!-- Menu items --> 
 
<div id="menu"> 
 
\t <ul class="menu"> 
 
\t <li class="level1"><a id="item1" class="mainlink">Menu1</a> 
 
\t \t \t <!-- Request menu --> 
 
\t \t \t <ul class="subMenu" id="B2_1"> 
 
\t \t \t <li class="level2"><a id="item1_1" >Sub-Menu1-1</a></li> 
 
\t \t \t <li class="level2"><a id="item1_2" >Sub-Menu1-2</a></li> 
 
\t \t \t </ul> 
 
\t \t \t <!-- Request menu (end) --> 
 
\t </li> 
 
\t <li class="level1"><a id="item2" class="mainlink">Menu2</a> 
 
\t \t \t <!-- Dossier/Report screen --> 
 
\t \t \t <ul class="subMenu" id="B2_2"> 
 
\t \t \t <li class="level2"><a id="item2_1" >Sub-Menu2-1</a></li> 
 
\t \t \t <li class="level2"><a id="item2_2" >Sub-Menu2-2</a></li> 
 
\t \t \t <li class="level2"><a id="item2_3" >Sub-Menu2-3</a></li> 
 
\t \t \t </ul> 
 
\t \t \t <!-- Dossier/Report menu (end) --> 
 
\t </li> 
 
\t <li class="level1"><a id="item3" class="mainlink" onClick="alert('Development of the Menu3 functionalities postponed!')">Menu3</a></li> 
 
\t </ul> 
 
</div> \t 
 
<!-- Menu items (end) --> 
 

 
<!-- Screen body --> 
 
<div id="body"> 
 
\t <!-- B5 block --> 
 
\t <table id="B5"> 
 
\t \t <tr> 
 
\t \t \t <td> 
 
\t \t \t \t <input id="B5_1" type="button" value="Button1" onClick="alert('Action 1')"> 
 
\t \t \t </td> \t \t \t 
 
\t \t \t <td> 
 
\t \t \t \t <input id="B5_2" type="button" value="Button2" onClick="alert('Action 2')"> 
 
\t \t \t </td> 
 
\t \t \t <td> 
 
\t \t \t \t <input id="B5_3" type="button" value="Button3" onClick="alert('Action 3')"> 
 
\t \t \t </td> 
 
\t \t \t <td> 
 
\t \t \t \t <input id="B5_4" type="button" value="Button4" onClick="alert('Action 4')"> 
 
\t \t \t </td> 
 
\t \t \t <td> 
 
\t \t \t \t <input id="B5_5" type="button" value="Button5" onClick="alert('Action 5')"> 
 
\t \t \t </td> \t \t 
 
\t \t </tr> 
 
\t </table> 
 
\t <!-- B5 block (end) --> \t 
 
</div> \t 
 

 
</body>

为了避免菜单下面的 “绿色”，你应该使用'位置。 –

'position：absolute'将使菜单与按钮 – andyb

答

使用的移position:absolute或relative这里不会工作，因为m ENU将与按钮重叠。

我开始转向大多数<li>风格的<a>，允许<li>与<a>的子菜单和高度（和绿色背景）增长不受影响。

我简化了JavaScript和CSS，将JavaScript操纵的某种风格转移回CSS。我还使用更新的代码来使用更新的.on('click')语法，并使用HTML data attribute将<a>链接到该按钮，以消除始终查找元素的需求。在子菜单中absolute`：

// no need to use jQuery to find these all the time 
 
var menuAnchors = $('#menu > li > a'); // cache top level anchors 
 
var buttons = $("input[id^='B5_']"); // cache all buttons 
 

 
// declare one click handler for all #menu > li > a 
 
$('#menu').on('click', '> li > a', function() { 
 
    menuAnchors.css('background-color', ''); // reset red to green 
 
    this.style.backgroundColor = 'red'; // anchor elements get red background when clicked 
 

 
    $(".subMenu").hide().reset(); // hide all subMenu 
 
    $(this).next(".subMenu").toggle("slow", function() {}); // show nearest next subMenu 
 
}); 
 

 
// declare one click handler for all .subMenu anchors 
 
$('.subMenu').on('click', function(e) { 
 
    $(this).reset(); 
 
    e.target.style.backgroundColor = 'red'; // target anchor set to red 
 
    var buttonId = $(e.target).data('button'); // get buttonId from data attribute 
 
    $('#' + buttonId).show(); 
 
}); 
 

 
// custom function to both hide and reset background to orange 
 
$.fn.reset = function() { 
 
    buttons.hide(); // hide all buttons 
 
    $(this).find('a').css('background-color', ''); // reset red to orange 
 
    return $(this); 
 
}

body { 
 
    background-color: #3e8cbd; 
 
} 
 

 
ul { 
 
    display: flex; 
 
    list-style-type: none; 
 
    padding: 0; 
 
} 
 

 
#menu li { 
 
    width: 10em; 
 
    color: white; 
 
    text-align: center; 
 
} 
 

 
#menu li a { 
 
    display: block; 
 
    padding: 14px 16px; 
 
    cursor: pointer; 
 
    background-color: green; 
 
    border-right: 1px solid #bbb; 
 
    border-top: 1px solid #bbb; 
 
} 
 

 
#menu li:last-child a { 
 
    border-right: none; 
 
} 
 

 
.subMenu { 
 
    flex-direction: column; 
 
    padding: 0; 
 
    display: none; 
 
} 
 

 
#menu .subMenu a { 
 
    background-color: orange; 
 
} 
 

 
#B5 input { 
 
    display:none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul id="menu"> 
 
    <li> 
 
    <a class="menuLink">Menu1</a> 
 
    <ul class="subMenu"> 
 
     <li><a data-button="B5_1">Sub-Menu1-1</a></li> 
 
     <li><a data-button="B5_2">Sub-Menu1-2</a></li> 
 
    </ul> 
 
    </li> 
 
    <li> 
 
    <a class="menuLink">Menu2</a> 
 
    <ul class="subMenu"> 
 
     <li><a data-button="B5_3">Sub-Menu2-1</a></li> 
 
     <li><a data-button="B5_4">Sub-Menu2-2</a></li> 
 
     <li><a data-button="B5_5">Sub-Menu2-3</a></li> 
 
    </ul> 
 
    </li> 
 
    <li> 
 
    <a class="menuLink" onClick="alert('Development of the Menu3 functionalities postponed!')">Menu3</a> 
 
    </li> 
 
</ul> 
 

 
<table id="B5"> 
 
    <tr> 
 
    <td> 
 
     <input id="B5_1" type="button" value="Button1" onClick="alert('Action 1')"> 
 
    </td> 
 
    <td> 
 
     <input id="B5_2" type="button" value="Button2" onClick="alert('Action 2')"> 
 
    </td> 
 
    <td> 
 
     <input id="B5_3" type="button" value="Button3" onClick="alert('Action 3')"> 
 
    </td> 
 
    <td> 
 
     <input id="B5_4" type="button" value="Button4" onClick="alert('Action 4')"> 
 
    </td> 
 
    <td> 
 
     <input id="B5_5" type="button" value="Button5" onClick="alert('Action 5')"> 
 
    </td> 
 
    </tr> 
 
</table>

答

你好，请更新以下CSS和在你的代码，它会任何你想要的js ..

$(function() { 
 
// Hide sub-menu: 
 
$(".subMenu").hide(); 
 
// Hide elements of the screen: 
 
$("#B3 th, #B3 td").hide(); 
 
$("[id^='B4_']").hide(); 
 
$("[id^='B5_']").hide(); 
 

 

 
// Hide/Display sub-menu once menu item is clicked: 
 
$(".mainlink").click(function() { 
 
\t $(".level1").css("background-color","green"); 
 
\t $(".level2").css("background-color","orange"); 
 
\t $(this).parent().css("background-color","red"); 
 
    \t $(this).parent("li").find(".subMenu").slideToggle("slow", function() { 
 
\t \t // Animation complete. 
 
\t }); 
 

 
}); 
 

 
// Hide/Display elements of the body of the screen once sub-menu item is clicked: 
 
// Request/Create 
 
/* 
 
$("#item1_1").click(function() { 
 
$(".subMenu li").css("background-color","orange"); 
 
$(this).parent().css("background-color","red"); 
 
$("[id^='B5_']").hide(); 
 
$("[id='B5_1']").show(); 
 
}); 
 

 
// Request/Search 
 
$("#item1_2").click(function() { 
 
$(".subMenu li").css("background-color","orange"); 
 
$(this).parent().css("background-color","red"); 
 
$("[id^='B5_']").hide(); 
 
$("[id='B5_2']").show(); 
 
}); 
 
// Folder/Report/Create folder 
 
$("#item2_1").click(function() { 
 
$(".subMenu li").css("background-color","orange"); 
 
$(this).parent().css("background-color","red"); 
 
$("[id^='B5_']").hide(); 
 
$("[id='B5_3']").show(); 
 
}); 
 
// Folder/Report/Create report 
 
$("#item2_2").click(function() { 
 
$(".subMenu li").css("background-color","orange"); 
 
$(this).parent().css("background-color","red"); 
 
$("[id^='B5_']").hide(); 
 
$("[id='B5_4']").show(); 
 
}); 
 
// Folder/Report/Search 
 
$("#item2_3").click(function() { 
 
$(".subMenu li").css("background-color","orange"); 
 
$(this).parent().css("background-color","red"); 
 
$("[id^='B5_']").hide(); 
 
$("[id='B5_5']").show(); 
 
}); 
 
*/ 
 
});

header { 
 
\t border-style: solid; 
 
\t margin: 0; 
 
} 
 

 
footer { 
 
\t border-style: solid; 
 
\t margin: 0; 
 
} 
 

 
#menu ul { 
 
\t display: block; 
 
    list-style-type: none; 
 
    padding: 0; 
 
} 
 

 
#menu li { 
 
\t width: 10em; 
 
\t color: white; 
 
\t display: inline-block; 
 
\t float:left; 
 
\t width: 150px; 
 
\t height: 35px; 
 
\t line-height: 35px; \t 
 
\t text-align: center; 
 
\t border-right: 1px solid #bbb; 
 
\t border-top: 1px solid #bbb; 
 
\t background-color: green; 
 
\t /*padding: 14px 16px;*/ 
 
} 
 

 
#menu li ul li{ 
 
\t padding: 7px 32px; 
 
\t width: auto; 
 
\t height: auto; 
 

 
} 
 
#menu li:last-child { 
 
    border-right: none; 
 
} 
 

 
#menu ul ul { 
 
\t flex-direction: column; 
 
\t padding: 0; 
 
} 
 

 
#menu li li { 
 
\t background-color: orange; 
 
}

重叠，代码段不适用于我 – goto

答

绝对位置的子菜单中，相对的#menu李
没有更多的子菜单项，因为点1

demo

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

下拉菜单出现问题

相关推荐