Question

我有一个我正在研究的学校项目，我需要让页面移动响应，所以如果大小小于700px，我会加载一个不同的样式表。我试图让菜单从顶部向下滑动，但它不能很好地工作，因为<ul>停留在周围并且不会消失。这是我的代码：

＆＃13;

$(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';
    }

＆＃13;

    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;
    }

＆＃13;

<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>

＆＃13;

Answer 1

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

从socket.on("typing", function(data) { var userMsg = data.user; if(userMsg in users) { for(let userSet of users[userMsg]) { userSet.emit("typing", {user: socket.user}); } } });。

onclick

将属性<div id="header-div-menubutton" onclick="mobileMenu()">设置为style="display:none"。
使用以下
更新就绪方法
```
<div id="mobileMenu-div">
```
在每个内部添加对$(document).ready(function(){ mobileMenu(); $('#header-div-menubutton').live('click', function(event) { toggleMobileMenuDiv(); }); function toggleMobileMenuDiv(){ $('#mobileMenu-div').slideToggle("slow"); } });方法的调用 toggleMobileMenuDiv()，aboutAppend()等。

注意：由于您已修复标题位置且高度为60px因此为bookitAppend()设置margin-top:60px因此它不会隐藏在标题下方。

建议：因为你正在使用jquery尝试尽可能多地使用它。 <div id="maincontent-div">等于document.getElementById("id")。

制作滑动移动响应式菜单

1 个答案: