无法使用JQuery保留高度？

Question

我有一个博客http://hubtank.com/。它使用的是最新版本的WordPress。在主菜单下我有类别（绿色）我想限制它的高度为100px和一个微小的向下箭头图像，所以当任何人点击它时，它会恢复其原来的（当前外观）大小或位置也切换。

我尝试过使用JavaScript，但没有正确的解决方案。如果我将它应用到DIV，则类别列表项不会隐藏或修剪。 .也可以使用jQuery吗？

Answer 1

$("#togglebutton").toggle(function() { 
    $("#menu").height(100); 
}, function() { 
    $("#menu").height("auto"); 
}).click(); 

这应该工作：在每次点击时，高度被切换。首先通过触发点击事件运行第一个功能（设置高度为100px）。

它也可以通过使用

$("#menu").animate({ 
    height: "auto" 
}); 

但随后进行动画，初始高度应一个时间设定没有动画（如第一示例）。

Answer 2

是的，这是可能的。

首先，在你的CSS为CATEG，你应该添加以下两个标签：

height: 20px; 
overflow: hidden; 

然后用箭头在图像中添加。比方说，它的“扩大”的ID

<img id="expand" src="arrow" /> 

在点击事件现在添加了ID扩大。

$('#expand').click(function() { 
    if ($("#categ").css("height") == "20px") { 
    $("#categ").css("height", "100px"); 
    } else { 
    $("#categ").css("height", "20px"); 
    } 
}); 

Answer 3

好的，我得到了你的问题。您categ DIV添加overflow:hidden，那么你就能脚本与jQuery箭头，就像这样：

var c = $("#categ"); 
if(c.height()==12){ 
    c.animate({ 
     height:50 
    }); 
}else{ 
    c.animate({ 
     height:12 
    }); 
} 

我得到了它在这里工作，你只需要调整CSS到您的网站： http://jsbin.com/inizil