Javascript 单击后如何关闭此菜单

我正在尝试定制

这是html标记：

<ul class="topnav" id="myTopnav">
  <li id="links"><a href="#home">Home</a></li>
  <li id="links"><a href="#news">News</a></li>
  <li id="links"><a href="#contact">Contact</a></li>
  <li id="links"><a href="#about">About</a></li>
  <li class="icon">
    <a href="javascript:void(0);" onclick="myFunction()">&#9776;</a>
  </li>
</ul>

ul.topnav {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
}

ul.topnav li {float: left;}

ul.topnav li a {
    display: inline-block;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    transition: 0.3s;
    font-size: 17px;
}

ul.topnav li a:hover {background-color: #555;}

ul.topnav li.icon {display: none;}

@media screen and (max-width:1180px) {
  ul.topnav li:not(:first-child) {display: none;}
  ul.topnav li.icon {
    float: right;
    display: inline-block;
  }
}

@media screen and (max-width:680px) {
  ul.topnav.responsive {position: relative;}
  ul.topnav.responsive li.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  ul.topnav.responsive li {
    float: none;
    display: inline;
  }
  ul.topnav.responsive li a {
    display: block;
    text-align: left;
  }
}

function myFunction() {
    var x = document.getElementById("myTopnav");
    if (x.className === "topnav") {
        x.className += " responsive";
    } else {
        x.className = "topnav";
    }
}

和JS:

<ul class="topnav" id="myTopnav">
  <li id="links"><a href="#home">Home</a></li>
  <li id="links"><a href="#news">News</a></li>
  <li id="links"><a href="#contact">Contact</a></li>
  <li id="links"><a href="#about">About</a></li>
  <li class="icon">
    <a href="javascript:void(0);" onclick="myFunction()">&#9776;</a>
  </li>
</ul>

ul.topnav {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
}

ul.topnav li {float: left;}

ul.topnav li a {
    display: inline-block;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    transition: 0.3s;
    font-size: 17px;
}

ul.topnav li a:hover {background-color: #555;}

ul.topnav li.icon {display: none;}

@media screen and (max-width:1180px) {
  ul.topnav li:not(:first-child) {display: none;}
  ul.topnav li.icon {
    float: right;
    display: inline-block;
  }
}

@media screen and (max-width:680px) {
  ul.topnav.responsive {position: relative;}
  ul.topnav.responsive li.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  ul.topnav.responsive li {
    float: none;
    display: inline;
  }
  ul.topnav.responsive li a {
    display: block;
    text-align: left;
  }
}

function myFunction() {
    var x = document.getElementById("myTopnav");
    if (x.className === "topnav") {
        x.className += " responsive";
    } else {
        x.className = "topnav";
    }
}

我正在尝试添加此选项，以便在用户单击任何列表项后关闭菜单-

$(document).ready(function($) {
    $('#links').click(function() {
       $("#myTopnav").removeClass("topnav");
    });
});

但这似乎不起作用

---

知道如何解决这个问题吗？

同一文档中的

id

属性应该是唯一的，用类替换重复的属性：

<ul class="topnav" id="myTopnav">
    <li class="links"><a href="#home">Home</a></li>
    <li class="links"><a href="#news">News</a></li>
    <li class="links"><a href="#contact">Contact</a></li>
    <li class="links"><a href="#about">About</a></li>
    <li class="icon">
      <a href="javascript:void(0);" onclick="myFunction()">&#9776;</a>
    </li>
</ul>

注意：您必须删除

responsive

类，而不是

topnav

希望这有帮助

函数myFunction（）{
var x=document.getElementById（“myTopnav”）；
如果（x.className==“topnav”）{
x、 类名+=“响应”；
}否则{
x、 className=“topnav”；
}
}
$（文档）.ready（函数（$）{
$（'.links'）。单击（函数（）{
$（“#myTopnav”）.removeClass（“响应”）；
});
});
ul.topnav{
列表样式类型：无；
保证金：0；
填充：0；
溢出：隐藏；
背景色：#333；
}
ul.topnav li{float:左；}
ul.topnav li a{
显示：内联块；
颜色：#F2F2；
文本对齐：居中；
填充：14px 16px；
文字装饰：无；
过渡：0.3s；
字号：17px；
}
ul.topnav li a:hover{背景色：#555；}
ul.topnav li.icon{显示：无；}
@媒体屏幕和屏幕（最大宽度：1180px）{
ul.topnav li:not（：第一个子项）{display:none；}
ul.topnav li.icon{
浮动：对；
显示：内联块；
}
}
@媒体屏幕和屏幕（最大宽度：680px）{
ul.topnav.responsive{位置：相对；}
ul.topnav.responsive li.icon{
位置：绝对位置；
右：0；
排名：0；
}
ul.topnav.li{
浮动：无；
显示：内联；
}
ul.topnav.lia{
显示：块；
文本对齐：左对齐；
}
}








更改
链接到类的id，因为id是唯一的

<ul class="topnav" id="myTopnav">
  <li class="links"><a href="#home">Home</a></li>
  <li class="links"><a href="#news">News</a></li>
  <li class="links"><a href="#contact">Contact</a></li>
  <li class="links"><a href="#about">About</a></li>
  <li class="icon">
    <a href="javascript:void(0);" onclick="myFunction()">&#9776;</a>
  </li>
</ul>

您甚至可以在
myTopnav
中选择
li
。例如：

$('#myTopnav li').click(function() {
    $(this).parent().removeClass("topnav");
});

Id必须是唯一的！您需要对所有链接而不是id使用
，然后像这样使用
$（'.links'）。单击（function（）{…}