jquery - 制作向下滑动的移动响应菜单

Question

我有一个正在处理的学校元素，我需要使页面移动响应，因此如果大小小于 700 像素，我会加载不同的样式表。我试图让菜单从顶部向下滑动，但效果不佳，因为 <ul>留在身边，不会消失。这是我的代码:

$(document).ready(function(){
        $('#header-div-menubutton').live('click', function(event) {
              $('#mobileMenuUl').toggleClass('mobileMenuUlShow');
             $('#mobileMenu-div').toggleClass('mobileMenuShow');
        });
     });
function mobileMenu(){
      var div = document.getElementById('mobileMenu-div');
      div.innerHTML = '<ul id="mobileMenuUl"><li><a href="#about" onclick="return aboutAppend()">About</a></li><li><a href="#bookit" onclick="return bookitAppend()">Book it!</a></li><li><a href="#schedule" onclick="return scheduleAppend()">Schedule</a></li></ul>';
    }
function aboutAppend(){
    var div = document.getElementById('maincontent-div');
    //clears everything in the div
    div.innerHTML = "";
    //puts the content into the div
    div.innerHTML = div.innerHTML + 'Extra stuff';
    }
    function bookitAppend(){
     var div = document.getElementById('maincontent-div');
     div.innerHTML = "";
     div.innerHTML = div.innerHTML +
     // put htm for the bookit button
      '<center><div id="bookit-div"><p> January 20<sup>30th<sup><div id="bookit-list"></div></div><center>';
    }
    function scheduleAppend(){
      var div = document.getElementById('maincontent-div');
      div.innerHTML = "";
      div.innerHTML = div.innerHTML + 'Schedule';
    }

    body{
      padding:0;
      margin:0;

    }
    #header-div{
      position: fixed;
      width:100%;
      height:60px;
      background:#2ecc71;
    }
    #header-div-a-small{
      left: 20px;
      top:17px;
      position:fixed;
      font-size:20px;
      font-family:verdana;
      text-decoration: none;
      color: #397F3E;
    }
    #header-div-a-regular{
    display: none;
    }
    #header-div ul{
      display: none;
    }
    #header-div li{
      font-family:verdana;
      margin-left:10px;
      display: inline;
    }
    #header-div-menubutton{
      position: fixed;
      top:5px;
      right:5px;
      width:50px;
      height:50px;
      border-radius:10px;
      background:#1C401F;
    }
    #hr-1{
      margin-top:11px;
    }
    #header-div-menubutton hr{
      width:75%;
      border-radius: 3px;
      border: 2px solid;
    }
    #mobileMenuUl{
      display: none;
    }
    .mobileMenuUlShow{
      display: inline;
    }
    #mobileMenu-div{
      position: fixed;
      background:transparent;
      top:60px;
      width: 100%;
      border-bottom:1px solid;
    }
    .mobileMenuShow{
      font-size: 20px;
      height: 300px;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<a href="index.html" id="header-div-a-regular">Mountain Springs Family Entertainment Center</a>
    <a href="index.html" id="header-div-a-small">Mountain Springs FEC</a>
    <div id="header-div-menubutton" onclick="mobileMenu()">
    <hr id="hr-1">
    <hr id="hr-2">
    <hr id="hr-3">
    </div>
    <ul>
    <li><a href="#about" onclick="return aboutAppend()">About</a></li>
    <li><a href="#bookit" onclick="return bookitAppend()">Book it!</a></li>
    <li><a href="#schedule" onclick="return scheduleAppend()">Schedule</a></li>
    </ul>
    </div>
    <div id="mobileMenu-div">

    </div>
    <div id="maincontent-div">
    </div>

Answer 1

Hendricks 我在这里运行你的代码是可能的修复。

1. 删除onclick来自 <div id="header-div-menubutton" onclick="mobileMenu()"> 的事件属性.
2. 设置属性style="display:none"至 <div id="mobileMenu-div"> .

3. 使用以下内容更新 ready 方法

   $(document).ready(function(){
       mobileMenu();
   
       $('#header-div-menubutton').live('click', function(event) {
            toggleMobileMenuDiv();
       });
   
       function toggleMobileMenuDiv(){
            $('#mobileMenu-div').slideToggle("slow");
       }
   });
   

4. 将调用添加到 toggleMobileMenuDiv()每个里面的方法 aboutAppend() , bookitAppend()等等。

注意:由于标题位置固定且高度为 60px 因此设置 margin-top:60px对于 <div id="maincontent-div">因此它不会隐藏在标题下方。

建议: 在您使用 jquery 时尽量使用它，例如。 document.getElementById("id")等于$("#id") .