【发布时间】：2015-03-27 01:37:40
【问题描述】：
我的网站顶部有以下可点击的导航菜单：
这段代码sn-p中也有代码：
$("nav td a").click(function(e) {
if ($(this).parent().hasClass('selected')) {
$("nav .selected div div").slideUp(200);
$("nav .selected").removeClass("selected");
//alert("HERE!");
} else {
$("nav .selected div div").slideUp(200);
$("nav .selected").removeClass("selected");
//alert("NO HERE");
if ($(this).next(".subs").length) {
$(this).parent().addClass("selected");
$(this).next(".subs").children().slideDown(200);
}
}
e.stopPropagation();
});
$("body").click(function() {
$("nav .selected div div").slideUp(200);
$("nav .selected").removeClass("selected");
});nav {
background: #f0f7fa;
color: #85a0ad;
margin: 40px -38px 0 -38px;
padding: 10px 38px;
}
nav table {
border-collapse: collapse;
width: 100%;
}
nav td {
padding: 0;
position: relative;
}
nav > td > a {
display: block;
color: #f0f7fa;
position: relative;
text-decoration: none;
}
nav > td.selected > a {
z-index: 2;
}
nav td div {
position: relative;
}
nav li div {
position: relative;
}
nav td div div {
background-color: #f0f0f0;
padding: 12px 0;
display: none;
font-size: 0.95em;
margin: 0;
position: absolute;
top: -1px;
z-index: 1;
width: 190px;
}
nav td div div.wrp2 {
width: 380px;
}
nav .sep {
left: 190px;
border-left: 1px solid #044a4b;
bottom: 0;
height: auto;
margin: 15px 0;
position: absolute;
top: 0;
width: 1px;
}
nav td div ul {
padding-left: 10px;
padding-right: 10px;
position: relative;
width: 170px;
float: left;
list-style-type: none;
}
nav td div ul li {
margin: 0;
padding: 0;
}
nav td ul ul {
padding: 0 0 8px;
}
nav td ul ul li {
margin: 0;
padding: 0;
}
nav td ul ul li a {
color: #044a4b;
display: block;
margin-bottom: 1px;
padding: 3px 5px;
text-decoration: none;
font-size: 1.1em;
}
nav td ul ul li a:hover {
background-color: #85a0ad;
color: #fff;
}
nav td.gap {
width: 33%;
}
nav.top {
margin-top: 0;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class="top">
<table>
<tr>
<td>▾ <a href="#" class="clicker">Lectures</a>
<div class="subs">
<div class="wrp2">
<ul class="navul">
<li>
<h4>Intros</h4>
<ul>
<li><a class=lecture href="lecture00.html">Introduction</a>
</li>
</ul>
</li>
<li>
<h4>Graph<span class="full-nav"> Theory</span></h4>
<ul>
<li><a class=lecture href="lecture01.html">Euler Circuits</a>
</li>
<li><a class=lecture href="lecture02.html">Beyond Euler Circuits</a>
</li>
<li><a class=lecture href="lecture03.html">Hamiltonian Circuits</a>
</li>
<li><a class=lecture href="lecture04.html">Travelling Salesmen</a>
</li>
<li><a class=lecture href="lecture05.html">Minimum Cost—Spanning Trees</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
<td class="gap">
<td>≡ <a href="#">Course<span class="full-nav"> Info</span></a>
</tr>
</table>
</nav>我还想将相同的菜单放在页面底部，可点击菜单向上而不是向下打开。我见过this post，但它是关于一个在悬停时打开的菜单，而我的是通过点击打开的。我对几件事感到困惑：
- 我应该将“位置：绝对；底部：100%”放在 CSS 中的什么位置？
- 当菜单向上打开时，我应该如何更改 slideUp/slideDown 调用？
- 如何防止一个菜单干扰另一个菜单？ [我的意思是，在我早期的尝试中，单击底部菜单会立即自行关闭，因为 jQuery 代码执行的是 slideUp 然后是 slideDown，但也许这不是问题。]
【问题讨论】：
-
这段代码在底层使用起来并不容易。我强烈建议您避开桌子并使用
<div>s 构建菜单。这也会更好地便携 -
@Fuzzyma：是什么让这张桌子更难处理？我已经成功地使用悬停时打开的菜单在底部工作，如链接问题中所述。我无法让它与这个特定的菜单和点击打开一起工作。
-
请在悬停版本中添加代码。将其更改为单击应该没什么大不了的。然而，处理表格总是令人毛骨悚然。在定位方面，表格单元的行为与普通元素不同，这就是它难以处理的原因
-
@Fuzzyma：在搞砸了这个之后，我认为你是对的，桌子让事情变得困难。我使用表格是因为我喜欢在菜单项之间留一个空格：如何使用 div 和 ul 来实现？
-
您也可以为列表添加边距和填充（甚至高度和宽度）。在您的情况下，您将使用
<div>作为滑动框，您可以使用嵌套列表作为菜单和子菜单（或只是普通列表）
标签： jquery html css drop-down-menu