Question

我正试图在我的移动视频中显示一个图标，您可以点击显示并隐藏菜单，现在我的代码不起作用，它根本不打开

我的问题是试图弄清楚ID和输入

不确定我做错了什么，有人能指出我正确的方向吗？提前致谢

//这就是我所拥有的

<nav class="navMenu">
<input id="menu-icon" type="checkbox">
<label id="menu-icon" class="iconMenuLbl" for="menu-icon"></label>
<ul>

    <li>
        <a href=""><img class="navImg" src="media/Home-tall.png" alt=""></a>
    </li>
    <li>
        <a href="summary"><img class="navImg" src="media/My-Details-tall.png" alt=""></a>
    </li>
    <li>
        <a href="loans"><img class="navImg" src="media/My-Loans-tall.png" alt=""></a>
    </li>
    <li id="loggedin-box" class="">
        <form method="POST" action="login">
        <div>
            <strong>some name</strong>
        </div>
        <button style="padding:0px;" name="logout" type="submit">
        <img class="navImg" src="media/Sign-Out.png">
        </button>
        </form>
    </li>
</ul>
</nav>

// js file

$(function() {
  var menuVisible = false;
  $('#menu-icon').click(function() {
    if (menuVisible) {
      $('.navMenu').css({'display':'none'});
      menuVisible = false;
      return;
    }
    $('.navMenu').css({'display':'block'});
    menuVisible = true;
  });
  $('.navMenu').click(function() {
    $(this).css({'display':'none'});
    menuVisible = false;
  });
});

Answer 1

您有两个共享相同名称的ID。＆＃39;菜单图标＆＃39;尝试将其中一个ID更改为另一个名称。 ID应该是唯一的。 - 也可以将输入字段移出导航标记。

移动视图中导航的问题

1 个答案: