Question

这是我在这里的第一个问题，如果措辞不正确，请道歉。我试图使用jQuery创建一个弹出式移动导航菜单，但是当我将锚标签添加到我的列表项时，它们就会消失。这是HTML：

<nav>
    <button id="nav-open">&#9776;</button>
    <div id="menu">
        <button id="nav-close"> X </button>
        <ul>
            <li><a href="http://foo.com">Home</a></li>
            <li>About</li>
            <li>Events</li>
            <li>Gallery</li>
            <li>Booking</li>
        </ul>
    </div>
</nav>

这是JS：

$("#nav-open").click(function(event){
   $("#menu").show();
   $(this).addClass("active");
   event.preventDefault();
});

$("#nav-close").click(function(event){
   $("#menu").hide();
   $(this).removeClass("active");
   event.preventDefault();
});

当用户点击移动设备上的＃nav-open时，会弹出弹出菜单。（当点击＃nav-close时，反之亦然。）我试图将锚标签添加到列表项中，但出于任何原因，当我添加＃menu菜单的链接，文字完全消失。

有关如何解决此问题的任何想法？

这是CSS：

  #menu {
   background: #000;
   opacity: 0.95;
   font-family: Arial Narrow;
   text-transform: uppercase;
   text-align: left;
   font-weight: bold;
   font-size: 30px;
   margin-right: 5%;
   height: 60px;
   position: fixed;
   left: 0;
   top: 0;
   width: 100%;
   height: 260px;
   padding-bottom: 10px;
  }

Answer 1

您的问题不在于您发布的任何代码 - 它在CSS中。你声明了这种风格：

nav a {
   visibility: hidden;
}

不确定为什么你拥有它，但这绝对是原因。只需删除它即可解决您的问题。

更新： CSS位于此文件中：http://omega.uta.edu/~slc1101/courses/ctec4350/semester-project/styles/styleKendall.css

将锚标记添加到列表项使列表项消失？

1 个答案: