Question

尝试在进入xs视口时找到更改导航栏类别的最佳方法。目前我这样做并复制内容：

<div class="offcanvas offcanvas-left">
  <div class="sidebar-offcanvas" id="sidebar" role="navigation">

    <!-- Mobile Menu (Turns on @ 760px) -->
    <nav class="navmenu navmenu-default hidden-sm hidden-md hidden-lg" role="navigation">
     <ul class="nav navmenu-nav">
        @include('layout.navigation.links')
      </ul>  
    </nav>
  </div>

    <!-- Desktop Menu (Turns off @ 760px -->
    <nav class="subnavbar headroom navbar-default subnavbar-fixed-top hidden-xs">
      <ul class="nav nav-pills">
        @include('layout.navigation.links')
      </ul>
    </nav>
</div>

在桌面视图和移动设备中使用hidden-xs使用hidden-sm hidden-md hidden-lg我可以使用两个单独的导航（一个用于桌面，一个用于移动。但是让我说我只是想在我改变课程时输入hidden-xs？并没有两个单独的导航。我会做这样的事情：

$("subnavbar headroom navbar-default subnavbar-fixed-top hidden-xs" ).replaceWith( "navmenu navmenu-default hidden-sm hidden-md hidden-lg" );

以上示例不起作用，我的ul class需要更改。简单地复制内容是最佳做法，还是应该使用jquery更改这些类？

注意： @include('layout.navigation.links')链接不会更改，只会更改<nav>和<ul>的类。

Answer 1

您可以使用多个removeClass()和addClass()的链接：

$(".subnavbar.headroom.navbar-default.subnavbar-fixed-top.hidden-xs").removeClass('subnavbar headroom navbar-default subnavbar-fixed-top hidden-xs').addClass( "navmenu navmenu-default hidden-sm hidden-md hidden-lg" );

或者如果您只提到类名作为类属性。

$(".subnavbar.headroom.navbar-default.subnavbar-fixed-top.hidden-xs").attr("class","navmenu navmenu-default hidden-sm hidden-md hidden-lg" );

在视口引导程序中更改类

1 个答案: