使用 jQuery 从菜单中删除边框
我有一个带有下拉菜单的导航。现在这些下拉菜单项在右侧和左侧都有边框，但在下拉项的最后一项上，我不希望有右侧边框。
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 项目上。之前的下拉列表项也同样如此。
如果我像这样放入 jQuery $('.dropDown li:last').css(border-right:0);它只会失去最后一个 li 项目的边框:(
感谢帮助！
I have a navigation that has a dropdown menu. Now those dropdown menu items has borders on right and left, but on last item of the dropdown item, I wouldnt like to have border-right.
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;
}
Now when use hovers over for example Link3 it shows the dropdown. On that dropdown it now has border on both sides but I would like to have border-right: 0; on the li item that has SubLinkF link. Also same goes for previous dropdown li items.
If I put in jQuery like this $('.dropDown li:last').css(border-right:0); it only looses the border from very last li item :(
Thanks for help!
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
将代码更改为
您不需要最后一个 li 元素，您想要最后一个 ul 元素中的所有 li 元素。
Change your code to
You don't want the last li-element, you want all li-elements in the last ul-element.
您应该向最后一个 UL 添加一个类，例如“last”。然后在你的CSS中：
.last > li { border-right: 0 }我坚信你应该在 css 而不是 javascript 中删除边框。
you should add a class to the last UL like "last". then in your css:
.last > li { border-right: 0 }I strongly believe that you should be removing the border in css and not javascript.