Question

我正在努力建立一个顶级酒吧＆＃39;延伸以揭示一系列链接。

要做到这一点，我选择了jQuery，一些研究表明我应该切换它。

在操纵“顶栏”类的许多失败事件之后，我尝试了另一种方法 - 请参阅：http://jsfiddle.net/SQHQ2/2408/

HTML：

<div id='topbar'>toggle me</div>
<a href="#" class="menu">Toggle</a>

CSS：

#topbar {
    background: orange;
    color: white;
    height: 60px;
    text-align:center;
}

jQuery：

    $(".menu").click(function() {
        $("#topbar").toggle(function() {
            $("#topbar").animate({
                height: 165
            }, 200);
        }, function() {
            $("#topbar").animate({
                height: 60
            }, 200);
        });
    });

当我尝试使用此代码时，它只是以动画方式隐藏顶部栏。

您是否可以帮助我找到一个解决方案，通过点击带有课程＆＃39; .menu＆＃39;的链接，可以扩展“顶部栏”。 DIV从60px的高度到160px的高度，以揭示隐藏的链接？

我欢迎通过其他方式实现的解决方案，只要它们起作用：）

祝新的一年和TIA。

Answer 1

另一种需要考虑的方法是将所有CSS和JavaScript分开。这是我的意思的一个例子：

HTML

<div id='topbar'>toggle me</div>
<a href="#" class="menu">Toggle</a>

CSS

#topbar {
  background: orange;
  color: white;
  text-align:center;
}

.short {
  height: 60px;
}

.tall {
  height: 160px;
}

的JavaScript

$(".menu").click(function() {
  $('#topbar').toggleClass('short', 'tall');
});

我们的想法是将您的样式保存在CSS中，然后切换要应用的类。

Answer 2

.toggle

是jQuery中的一个处理程序，可以在点击时切换（这就是为什么你的栏点击它时切换的原因）

$(".menu").toggle(function() {
    $("#topbar").animate({
        height: 165
    }, 200);
}, function() {
    $("#topbar").animate({
        height: 60
     }, 200);
});

应该可以正常工作。

Answer 3

$(".menu").toggle(function() {
    $("#topbar").animate({
        height: 165
    }, 200);
}, function() {
    $("#topbar").animate({
        height: 60
    }, 200);
});

Answer 4

也许您可以在标签中添加属性以保持状态（展开/未展开）。而不是切换只是用它来动画顶栏

HTML

<div id='topbar'>toggle me</div>
<a expanded="0" href="javascript:void(0);" class="menu">Toggle</a>

JS

$(".menu").click(function() {
    var thisObj = this;
    var expanded = parseInt($(thisObj).attr("expanded"));
    if (expanded){
        $("#topbar").animate({height:60},200, function(){
            $(thisObj).attr("expanded", "0");    
        });
    } else {
        $("#topbar").animate({height:160},200, function(){
            $(thisObj).attr("expanded", "1");  
        });
    }
});

如何在单击链接时切换DIV的大小以扩展其高度？

4 个答案: