Question

几个星期以来，我一直致力于一个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>

Answer 1

子菜单的绝对位置，相对于#menu li
由于第1点，不再有子菜单项移位。

<强> demo

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

Answer 2

此处使用position:absolute或relative将无效，因为菜单会与按钮重叠。

我将大多数<li>样式移到<a>，允许<li>与subMenu和{{1}的高度（和绿色背景）一起增长不受影响。

我开始简化JavaScript和CSS，将JavaScript操作的一些风格转移回CSS。我还使用更新的代码来使用较新的.on('click')语法，并使用HTML data attribute将<a>链接到按钮，以便无需一直查找元素。

<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;
}

Answer 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;
}

下拉菜单显示问题

3 个答案: