无法使用JQuery保留高度

我在http://hubtank.com/.它使用的是最新版本的WordPress。在主菜单下，我有类别(绿色(，我想将其高度限制为100px，并有一个小的向下箭头图像，这样当任何人点击它时，它将恢复其原始(当前外观(大小或位置。

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

是的，这是可能的。

首先，在您的CSS for 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");
  }
});

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

这应该有效：每次点击时，都会切换高度。通过触发点击事件最初运行第一个函数(将高度设置为100px(。

它也可以通过使用来设置动画

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

但是，初始高度应该在没有动画的情况下设置一次(就像第一个例子(。

好的，我明白你的问题了。在categdiv上添加overflow:hidden，然后就可以用jQuery编写箭头脚本，如下所示：

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

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

相关内容

最新更新

热门标签：