2
幾個星期以來，我一直在研究一個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