Question

所以我在我的网站上有一个显示/隐藏脚本，效果很好。但是有1个问题和1个请求。

一次只需要允许1个div显示
当div出现时，到有它＆＃39;滑动＆＃39;从标题下方开始。

这是脚本：

    function toggle_visibility(id) {
         var e = document.getElementById(id);
         if(e.style.display == 'block')
                e.style.display = 'none';
         else
                e.style.display = 'block';
    }

以下是按钮如何与HTML中的div相关联：

<a onclick="toggle_visibility('testing');">Testing</a>

<div style="display:none;" id="testing">
testing for page 2
</div>

以下是关于幻灯片动画的屏幕布局：

如果有人可以帮助将这些功能添加到脚本中，或者他们有不同的脚本执行相同的操作，但请更好地告诉我。感谢

Answer 1

如果您想使用jQuery，请查看slideToggle()：

<html>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

    <script>
      var activeDiv = 'welcome';
      function toggle_visibility(id) {            
        if ( activeDiv === id ) return;
        $('#' + activeDiv).css('display','none');
        activeDiv = id;
        $('#' + id).slideToggle();
        $('#' + id).css('display','block');
      };
      $(document).ready(function() {
        $('#welcome').slideToggle();
      });

    </script>
  </head>
  <body>
    <a onclick="toggle_visibility('testing');">Show the First DIV</a><br>
    <a onclick="toggle_visibility('testing2');">Show the Second DIV</a>

    <div style="display: none;" id="testing">
      The First DIV
    </div>

    <div style="display: none;" id="welcome">
      Welcome!
    </div>

    <div style="display: none;" id="testing2">
      The Second DIV
    </div>
  </body>
</html>

Answer 2

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("button").click(function(){
        $("p").slideToggle();
    });
});
</script>
</head>
<body>

<p>This is a paragraph.</p>

<button>Toggle slideUp() and slideDown()</button>

</body>
</html>

添加show one a time功能并将动画滑动到预先存在的脚本

2 个答案: