使用jQuery从菜单中删除边框答案

【问题标题】：Remove border from menu with jQuery使用jQuery从菜单中删除边框
【发布时间】：2011-05-12 17:49:59
【问题描述】：

我有一个带有下拉菜单的导航。现在这些下拉菜单项在左右两侧都有边框，但是在下拉项的最后一项上，我不希望有边框。

HTML

<ul id="mainNav">
<li>
  <a href="#">Link1</a>
  <ul class="dropDown" style="dislay:none;">
   <li><a href="link.html">SubLinkA</a></li>
   <li><a href="link.html">SubLinkB</a></li>
  </ul>
</li>
<li>
   <a href="#">Link2</a>
   <ul class="dropDown" style="dislay:none;">
     <li><a href="link.html">SubLinkC</a></li>
     <li><a href="link.html">SubLinkD</a></li>
  </ul>
</li>
<li>
  <a href="#">Link3</a>
  <ul class="dropDown" style="dislay:none;">
     <li><a href="link.html">SubLinkE</a></li>
     <li><a href="link.html">SubLinkF</a></li>
  </ul>
</li>
</ul>

CSS

.dropDown li {
border: 1px solid black;
}

现在，当使用鼠标悬停在 Link3 上时，它会显示下拉菜单。在那个下拉列表中，它现在两边都有边框，但我想有border-right：0；在具有 SubLinkF 链接的 li 项目上。以前的下拉 li 项也是如此。

如果我像这样放入 jQuery $('.dropDown li:last').css(border-right:0);它只会从最后一个 li 项中丢失边框:(

感谢您的帮助！

【问题讨论】：

标签： jquery navigation drop-down-menu

【解决方案1】：

将您的代码更改为

$('.dropDown:last li').css(border-right:0);

你不想要最后一个 li 元素，你想要最后一个 ul 元素中的所有 li 元素。

【讨论】：

【解决方案2】：

您应该向最后一个 UL 添加一个类，例如“last”。然后在你的 CSS 中：

.last > li { border-right: 0 }

我坚信您应该在 css 而不是 javascript 中删除边框。

【讨论】：