Question

我希望点击菜单按钮后可以看到移动导航。这是example。您需要缩小浏览器才能看到它。

我有这个用于移动导航按钮

<script>
$(document).ready(function() {
  $('a.ext-link').click(function() {
    var id = $(this).attr('href');
    window.location=$(id + ' a').attr('href');
  });
});
<script>

当我点击它时，它应该使＃nav-mobile div可见

<div id="nav-trigger">
<span>Menu</span>
</div>

我一直在寻找一个好的javascript解决方案但我的javascript仍然不够好处理它。但是，当我看到代码时，我可以理解它。

在css中，我使用display：none和display：block来使导航可见，并且对于特定的屏幕尺寸不可见。所以很容易有一个javascript来显示：在不同的div框上启用块。

Answer 1

你的HTML搞砸了，所以我纠正了它。您只需切换菜单的可见性状态即可。就可访问性而言，这不是理想的方法，但您应该能够开始并根据需要进行改进。

＆＃13;

(function(trigger, menu) {
  /** toggle menu class name on click */
  function fn(event) {
    if (event.target.id === trigger.id || event.target.parentElement.id === trigger.id) {
      menu.classList.toggle('hidden');
    }
  }
  document.addEventListener('click', fn, false);
}(document.querySelector('#nav-trigger'), document.querySelector('#nav-mobile')));

＆＃13;

.hidden {
  display: none;
}

＆＃13;

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Onclick visible div box</title>
</head>

<body>

  <div id="nav-trigger">
    <span>Menu</span>
  </div>

  <nav id="nav-mobile" class="hidden">
    <ul>
      <li class="akt">Teams</li>
      <li><a href="partners.htm">Partners</a>
      </li>
      <li><a href="contact.htm">Contact</a>
      </li>
      <li><a href="guides.htm">Guides</a>
      </li>
      <li><a href="streams.htm">Streams</a>
      </li>
      <li><a href="shop.htm">Shop</a>
      </li>
    </ul>
  </nav>

</body>

</html>

＆＃13;

点击可见的div框

1 个答案: