下拉菜单外观问题答案

【问题标题】：Issue with drop-down menu apperance下拉菜单外观问题
【发布时间】：2016-07-06 20:30:30
【问题描述】：

几周以来，我一直在研究一个 Web 应用程序项目，而我目前正在研究一个下拉菜单。除了以下两点，它的效果很好：

当我通过单击其中一个主要项目来展开菜单时，我想避免绿色在其他子菜单的级别上也展开（例如，通过单击“Menu1”我不不希望“Menu2”和“Menu3”下方出现绿色块）
我也想让我的物品变大。但是当我激活“填充：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() {
	$(".subMenu").hide(); 
  $("#B3 th, #B3 td").hide();
  $("[id^='B4_']").hide();
  $("[id^='B5_']").hide();
	$(".level1").css("background-color","green");
	$(".level2").css("background-color","orange");  
	$(this).parent().css("background-color","red");
 	$(this).parent().find(".subMenu").toggle( "slow", function() {
		// Animation complete.
	});

});

// 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 {
	background-color: #3e8cbd;
}

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

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

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

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

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

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

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

<!-- Screen body -->
<div id="body">
	<!-- B5 block -->
	<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>
	<!-- B5 block (end) -->	
</div>	 

</body>

【问题讨论】：

为了避免菜单下方的“绿色”，您应该在子菜单中使用position: absolute。
position: absolute 将使菜单与按钮重叠

标签： jquery html css

【解决方案1】：

在此处使用position:absolute 或relative 将不起作用，因为菜单将与按钮重叠。

我已将大部分<li> 样式移至<a>，允许<li> 随子菜单一起增长，并且<a> 的高度（和绿色背景）不受影响。

我尝试简化 JavaScript 和 CSS，将 JavaScript 正在处理的一些样式移回 CSS。我还使用更新的代码来使用更新的.on('click') 语法，并使用HTML data attribute 将<a> 链接到按钮以消除一直查找元素的需要。

// 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>

【讨论】：

【解决方案2】：

子菜单的绝对位置，#menu li 的相对位置
没有更多子菜单项因为第 1 点而移动。

demo

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

【讨论】：

【解决方案3】：

您好，请在您的代码中更新下面的 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() {
	$(".level1").css("background-color","green");
	$(".level2").css("background-color","orange");  
	$(this).parent().css("background-color","red");
 	$(this).parent("li").find(".subMenu").slideToggle( "slow", function() {
		// Animation complete.
	});

});

// 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 {
	border-style: solid;
	margin: 0;
}

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

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

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

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

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

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

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

【讨论】：