jQuery滑动div

Question

我有三个图像按钮，一旦我点击其中一个按钮，就会出现一个包含文字的滑动div。

这是我的JavaScript代码：

    <script type="text/javascript">
    function showSlidingDiv() {
        $("#slidingDiv").animate({
            "height": "toggle"
        }, {
            duration: 300
        })
    }
    function showSlidingDiv2() {
        $("#slidingDiv2").animate({
            "height": "toggle"
        }, {
            duration: 300
        })
    }
    function showSlidingDiv3() {
        $("#slidingDiv2").animate({
            "height": "toggle"
        }, {
            duration: 300
        })
    }
    </script>

使用此命令触发该功能：

    <a href="#" onClick="showSlidingDiv(); return false;">

该脚本工作正常，但目前如果我点击内容相互附加的所有链接 - 我想要实现的是在点击新链接后隐藏一个打开的div类。

我该怎么做？

Answer 1

我建议使用jQuery accordion插件。

<强>更新 您可以关闭所有div并打开所选的那个：

    function toggleDiv(selectedDiv) {
      // shortcut to select all sliding divs
      $('div[id^="sliding"]').animate({
              "height": "toggle"
          }, {
              duration: 300
          }, function () {
                $(selectedDiv).show();
      });
              }

在你的hrefs中，调用这样的函数：

onClick="toggleDiv('#slidingDiv1'); // use slidingDiv2, 3 for other hrefs