如何在不影响其他 <li> 的情况下动态更改 <li> 样式？答案

【问题标题】：How to dynamically change <li> style without affecting other <li>s?如何在不影响其他 <li> 的情况下动态更改 <li> 样式？
【发布时间】：2010-09-17 17:47:36
【问题描述】：

我有一个无序列表的链接。

<ul>
<li><a href="#">Link is really really really really LONNNNNNNG</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>

我已将行高或列表项设置为 30 像素。

ul {width:100px;}
ul li {line-height:30px;}
ul li a {display:block;}

我想在文本换行到第二行的任何<li> 上更改此设置，而不影响其他<li>s。在 jquery 中执行此操作的最佳方法是什么？提前致谢。

【问题讨论】：

标签： jquery menu navigation css

【解决方案1】：

您应该改用padding: 或margin: 并省略您的line-height。我假设您希望在每个 li 之间保持一致的间距；改用边距和内边距。

【讨论】：

我试过了，但我在其他浏览器上得到了一些有趣的结果。我觉得添加 js 来动态改变 line-height 比尝试“眼球”更好。如果我添加边距，也会出现悬停效果
我不太确定你想要完成什么，但恕我直言，你应该能够通过 CSS 和使用 jquery 来完成所有这些工作（在动画/悬停效果的上下文之外） ) 不是最佳做法

【解决方案2】：

您使用纯 Javascript 测试每个 li 元素的字符串长度 - 请参阅 this question - 并根据需要修改它（使用 Javascript、JQuery 或其他 JS 库）。

【讨论】：

【解决方案3】：

感谢您的建议，戴夫。我想我想通了。这就是我所做的：

$('ul li').each(function(){
var menuHeight = $(this).outerHeight();                               
if(menuHeight != 30){
$(this).addClass('squeeze');
}else{
$(this).removeClass('squeeze'); }
});

基本上我正在查看 each<li> 并将高度保存在变量中。如果<li> 不是 30px，则添加类“挤压”。可能不需要 else 语句，但我把它扔进去了。

谢谢大家

【讨论】：