将响应导航应用于两种不同的导航

Applying responsive-nav to two different navigations

本文关键字：导航 应用于 响应 两种      更新时间：2023-09-26

我有这个HTML代码，并使用responsive-nav.js制作响应导航

<nav class="nav-collapse first pull-left">
          <ul>
            <li><a href="#">Home</a></li>
          </ul>
        </nav>
        <nav class="nav-collapse second pull-right">
          <ul>
            <li><a href="#">New</a></li>
          </ul>
        </nav>
<script src="responsive-nav.js"></script>
<script>
  var nav = responsiveNav(".nav-collapse.first, .nav-collapse.second");
</script>

如何在两者上应用响应导航？

这就是脚本通过指定选择器选择元素的方式：

    this.wrapperEl = el.replace("#", "");
    if (document.getElementById(this.wrapperEl)) {
      this.wrapper = document.getElementById(this.wrapperEl);
    } else if (document.querySelector(this.wrapperEl)) {
      this.wrapper = document.querySelector(this.wrapperEl);
    } else {
      // If el doesn't exists, stop here.
      throw new Error("The nav element you are trying to select doesn't exist");
    }

因此，正如您所看到的，不可能像jQuery那样同时选择两个元素。您需要呼叫responsiveNav两次。

相关文章：