Question

似乎无法让我的jquery按照我想要的方式工作。

我正在为我的图标使用font-awesome。

基本上，我希望我的“汉堡包”菜单在浏览器调整大小时更改为“X”符号，这样即使在更大的屏幕上，人们也可以隐藏菜单。

问题是如果我按原样保留jquery代码，它会在较大的屏幕上显示汉堡包菜单，当点击隐藏菜单时，它会显示x。我基本上希望在更大的显示器上相反。首先在较大的显示器上显示X以“隐藏菜单”然后再向他们的车显示它。

这是我的代码。（剥离和修改尽可能简单）

<div class="nav-bar">
  <div class="drop-menu">
    <ul>
      <li><span class="menu-text">Hide </span>Menu</li>
      <li><a name="ham-menu" id="ham-menu"><i class="fa fa-bars"></i></a></li>
    </ul>
  </div>
  <nav>
    <ul>
      <li>Link</li>
      <li>Link</li>
      <li>Link</li>
      <li>Link</li>
    </ul>
  </nav>

CSS＆gt;

li {
  list-style: none;
  display: inline-block;
}

.menu-text {
  display: none;
}

nav {
  display: none;
}
@media all and (min-width: 500px) {
  .drop-menu span {
            display: inline;
        }
  }
}

JQUERY＆gt;

jQuery(document).ready(function($) {
      /* DROP DOWN MENU AND TOGGLE CSS CLASS TO CHANGE 3 BAR ICON TO X ICON ON CLICK */
      var $window = $(window),
            $hamMenu = $('#ham-menu i'),
          $nav = $('nav');

      $('#ham-menu').on('click', function(event) {

        event.preventDefault();

        //$('nav').fadeToggle();
        $hamMenu.toggleClass('fa-bars fa-close');
        $nav.slideToggle();
      });


     /* CODE THAT CHANGES THE 3 BAR MENU ICON TO A "X" ICON ON BROWSER RESIZE PAST 500PX */

      function resize() {
    if($window.width() >= 500) {
        return $hamMenu.removeClass('fa-bars');
    } 
        $hamMenu.addClass('fa-close');
    }

    $window
        .resize(resize)
        .trigger('resize');

      }); /* END JQUERY */

我的onclick事件本身就很好。它将NAV菜单向下放下并将3 bar菜单更改为X.

问题是当我添加代码的第二部分时，当浏览器大于某个宽度时，将3条图标更改为X.我想让用户能够关闭菜单，如果他们希望甚至在更大的显示器上，如果他们启用了JS。

当我在SO上的另一个帖子中找到的调整大小功能中添加时，如果我的菜单完全搞砸了，它根本无法正常工作。

这是导航菜单正常工作，我的jquery的第二部分已删除。

Working navigation drop down

当我尝试添加代码以将条形图切换到较大显示器上的X图标时，这个菜单根本无法正常工作。

Navigation not working anymore

图标在较大的显示屏上有一个X，但在移动设备尺寸上不再有3 bar图标。当我点击移动设备上的3栏图标时，它会完全删除它，并且不再显示X图标。当你看到小提琴时，你会明白我的意思。我可能错过了一些非常简单的事情。

如何让Icon更改回移动视图上的3 bar图标。我输了。

更新1＆gt;

这是工作代码，比我想象的要简单得多。

  $('#ham-menu').on('click', function (event) {

        event.preventDefault();

        //$('nav').fadeToggle();
        $hamMenu.toggleClass('fa-bars fa-close');
        $nav.slideToggle();
    });

    /* CHANGE OUT THE 3 BAR MENU TO CROSS TO START WITH ON NAV MENU TO ALLOW USER TO CLOSE THE MENU */
    if ($window.width() > 750) {
        return $hamMenu.toggleClass('fa-close fa-bars');
    }

这完全适用于某人以不同宽度加载浏览器。假设我想通过浏览器并手动改变它的宽度来“切换”类，我该怎么做？

Answer 1

你的resize事件处理程序应该是if / else，还是你总是想重新添加fa-close类？

无法让Jquery删除并在浏览器调整大小时正确添加类

更新1＆gt;

1 个答案: