使用Jquery在单击时设置ul的高度

Question

实际上我有一个使用css设置为特定高度的ul。我试图在单击div元素时设置ul的高度。这是我的代码

HTML：

<div class="hey">Click me</div>
<ul style="height:100px">My Height</ul>

JS：

$(document).ready(function() {
    $('.hey').click(function(){
        $(this).next().find('ul').css('height','10px');
    });
});

我错过了什么吗？

以下是demo

Answer 1

ul是下一个兄弟，所以你需要使用.next（），之后不需要使用.find（）

$(this).next('ul').css('height', '10px');

演示：Fiddle

在您的情况下，您正在尝试查找ul元素，该元素是所点击的.hey的下一个兄弟的后代

Answer 2

使用 next() 后找不到因为 当我们使用next（）然后它到达ul 所以现在无需找到ul

$(document).ready(function() {
    $('.hey').click(function(){
        $(this).next('ul').css('height','10px');
    });
});

<强> Updated demo

Answer 3

是肯定的。实际上 next（）会找到下一个元素，并在其中搜索ul检查它..

<div class="hey">Click me</div>
<div>
  <ul style="height:100px">My Height</ul>
</div>

工作检查fiddle

Answer 4

$(document).ready(function() {
    $('.hey').click(function(){
        alert($('ul').css('height'));
           $(this).siblings('ul').css('height','10px');
        alert($('ul').css('height'));
    });
});

Answer 5

您可以使用line-height CSS属性

检查此 demo jsFiddle

的jQuery

$(document).ready(function() {
    $('.hey').click(function(){
        $('div').next().css('line-height','10px');
    });
});

HTML

<div class="hey">Click me</div>
<ul>My Height</ul>

CSS

ul {
    border:1px solid #FF0000;
    line-height:100px;
}

希望这会对你有帮助！