Question

我使用一些代码展开div，以便在点击按钮时显示更多内容。我想现在让页面滑下来当div切换但不知道如何用我现在拥有的东西。

    <script type="text/javascript">
    function toggleDiv(divId) {
       $("#"+divId).toggle();
    }    
    </script>

    <a href="javascript:toggleDiv('myContent');" style="background-color: #f9c76a; color:#fff; font-weight:bold; margin-left:2%; padding: 5px 10px; border-bottom:none !important; " class="button2">Button to Expand &gt;</a>

    <div id="myContent" style="display:none; margin-left:2%; padding: 5px 10px; color:#fff; position:relative;">
    Expanded Text Here</div>

Answer 1

这是一个工作的想法：

$(function() {
  $('#toggle-button').click(function() {
    $('#toggle-content').slideToggle();
  });
});

#toggle-content {
  display: none;
  background-color: #dcebf9;
}

Answer 2

HTML 将id分配给链接

<a id="linkTo" style="background-color: #f9c76a; color:#fff; font-weight:bold; margin-left:2%; padding: 5px 10px; border-bottom:none !important; " class="button2" >Button to Expand &gt;</a>

<div id="myContent" style="display:none; margin-left:2%; padding: 5px 10px; color:#fff; position:relative;background-color: #e5eecc;">
Expanded Text Here</div>

<强> JQuery的

$(document).ready(function(){

$("#linkTo").click(function(){
   $("#myContent").slideToggle("slow");
});
});

您可以为div显示/隐藏任意其他元素。的的jsfiddle https://jsfiddle.net/6gn2obkn/

Javascript togglediv和平滑滚动页面

2 个答案: