Javascript 无法使drop 3 bar菜单具有背景或关闭

感谢杰拉德的编辑。我尝试了代码，它关闭了，但仍然没有背景，链接宽度仍然占据了屏幕。 我已经为我的网站的移动版制作了一个3栏菜单，但是当它被点击时，1，文本后面的菜单没有背景， 2每页之间的间距非常糟糕，每页的超链接占据了整个屏幕的宽度，最后，再次单击（页面仍会在按钮上方）或在其周围单击时，它不会关闭

如何获得背景，缩短间距和超链接区域，并在单击或在其附近随机单击时将其关闭

我认为这是因为一些当前的CSS可能会干扰

这是我的CSS代码：

@media screen and (max-width: 768px) {
    #menu {
        width:1.4em;
        display: block;
        background:#ddd;
        font-size:1.35em;
        text-align: center;
    }
    #nav.js {
        display: none;
    }
    ul {
        width:100%;
    }
    li {
        width:100%;
        border-right:none;
    }
}
@media screen and (min-width: 768px) {
    #menu {
        display: none;
    }
}

/* NAV */
.dropbtn {
    background-color: #ffffff;
    color: black;
    border: none;
    cursor: pointer;
    display: block;
    color: inherit;
    text-decoration: none;
    height: 3em;
    line-height: 3em;
    padding: 0 0.5em 0 0.5em;
    outline: 0;
}

.dropbtn:hover, .dropbtn:focus {
    background-color: #ffffff;
}

.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    overflow: auto;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

.dropdown a:hover {background-color: #f1f1f1}

.show {display:block;}

JS

$("#nav").addClass("js").before('<div id="menu">&#9776;</div>');
$("#menu").click(function(){
    $("#nav").toggle();
});
$(window).resize(function(){
    if(window.innerWidth > 768) {
        $("#nav").removeAttr("style");
    }
});

/* When the user clicks on the button, 
toggle between hiding and showing the dropdown content */
function myFunction() {
    document.getElementById("myDropdown").classList.toggle("show");
}

// Close the dropdown if the user clicks outside of it
window.onclick = function(event) {
  if (!event.target.matches('.dropbtn')) {

    var dropdowns = document.getElementsByClassName("dropdown-content");
    var i;
    for (i = 0; i < dropdowns.length; i++) {
      var openDropdown = dropdowns[i];
      if (openDropdown.classList.contains('show')) {
        openDropdown.classList.remove('show');
      }
    }
  }
}

$（“#nav”）.addClass（“js”）。在（“☰；”）之前；
$（“#菜单”）。单击（函数（）{
$（“#导航”）.toggle（）；
});
$（窗口）。调整大小（函数（）{
如果（window.innerWidth>768）{
$（“#nav”）.removeAttr（“样式”）；
}
});
/*当用户单击按钮时，
在隐藏和显示下拉内容之间切换*/
函数myFunction（）{
document.getElementById（“myDropdown”）.classList.toggle（“show”）；
}
//如果用户在下拉列表之外单击，请关闭下拉列表
window.onclick=函数（事件）{
如果（！event.target.matches（'.dropbtn'））{
var dropdowns=document.getElementsByClassName（“下拉内容”）；
var i；
对于（i=0；i

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<nav id="nav"> 
    <ul>
        <li><a href="#intro">Home</a></li>
        <li><a href="#one">About</a></li>
        <li><a href="#two">The Ship</a></li>
        <div class="dropdown">
            <button onclick="myFunction()" class="dropbtn">Skills</button>
                <div id="myDropdown" class="dropdown-content">
                    <a href="/1/skills/index.html">Skills</a>
                    <a href="/1/skills/index.html#courses">Courses</a>
                    <a href="/1/skills/index.html#apprenticeships">Apprenticeships</a>
                </div>
            </div>
            <li><a href="Journey/">Journey</a></li>
            <li><a href="/1/memberships/">Join Us</a></li>
            <li><a href="#contact">Contact</a></li>
            <li><a href="https://www.justgiving.com/harwich-mayflower/"> <font color="purple" size="4"><strong>Donate<strong></font></a></li>
            <br></br>
        </ul>
    </nav>

技能

因此，您遇到了一些小问题，我不知道这是否发生在您复制代码时，但这里是：

首先（再次抱歉，如果你已经有了这个，但是因为你复制的东西没有，我假设这是问题之一）你需要$（document）。准备好了，你需要把你的js代码放在那里，否则它不会运行

JS

这是它的基本原理

---

希望这有帮助

你也能分享html吗？你只有js和css在里面。@biseibutsu抱歉！添加了HTMLTATS真棒！但是，当点击菜单时，整个菜单覆盖了3个栏，当你在菜单外点击时，它不会关闭。为什么会这样？好吧，这一次还是这样，因为我不确定我是否理解正确：是的，还是一样。我假设这与我现有的CSS干扰有关？我认为也有一些js错误，请尝试从开发人员控制台上跟踪它们browser@biseilbutsu它抓住了一个。它说“uncaughtreferenceerror:$未定义”，代码是：$（document）.ready（function（））{

    $(document).ready(function() {
  $("#nav").addClass("js").before('<div id="menu">&#9776;</div>');
  //I prefer to have the onclick like this but I haven't deleted the myfunction you have, so you can still use that giving the function name from the html
  $('.dropbtn').click(function() {
    document.getElementById("myDropdown").classList.toggle("show");

  });
  $("#menu").click(function() {
    $("#nav").toggle();
  });
  $(window).resize(function() {
    if (window.innerWidth > 768) {
      $("#nav").removeAttr("style");
    }
  });



  // Close the dropdown if the user clicks outside of it
  window.onclick = function(event) {
    if (!event.target.matches('.dropbtn')) {

      var dropdowns = document.getElementsByClassName("dropdown-content");
      var i;
      for (i = 0; i < dropdowns.length; i++) {
        var openDropdown = dropdowns[i];
        if (openDropdown.classList.contains('show')) {
          openDropdown.classList.remove('show');
        }
      }
    }
  }


});

/* When the user clicks on the button, 
toggle between hiding and showing the dropdown content */
function myFunction() {
  document.getElementById("myDropdown").classList.toggle("show");
}

  ul {
    width: 30%;
    background-color: aquamarine;
  }