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 for Categ中，您应该添加以下两个标记：

height: 20px;
overflow: hidden;

然后用箭头添加图像。假设它的ID为“expand”

<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

好的，我遇到了你的问题。在overflow:hidden div上添加categ，然后您就可以使用jQuery编写箭头脚本，如下所示：

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

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

使用JQuery无法保持高度？

3 个答案: