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

Question

我正在尝试扩展“顶部栏”以显示一系列链接。

为此，我选择了 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);
        });
    });

当我尝试这段代码时，它只是以动画方式隐藏了顶部栏。

你能帮我实现一个解决方案吗，在单击带有类“.menu”的链接时，会将“顶部栏”DIV 从 60 像素的高度扩展到 160 像素的高度，以显示隐藏的链接？

我欢迎通过其他方式实现的解决方案，只要它们有效:)

祝新的一年和 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 中，然后切换您想要应用的类。