如何通过 jQuery 在菜单之间切换？

Question

单击admin 或user 菜单链接时，我试图在菜单之间切换。如何将其设为动画以使其 slideOutLeft 用于当前菜单，然后 slideInLeft 用于下一个菜单？有没有可能使用它而不使用 add class display none 或 block 的方法？

这是我的代码：

jQuery 函数有点乱，还有没有机会改进并使其对每个函数更健壮？

$(document).ready(function () {
    // load the functions
    switchAdminMenu();
    switchUserMenu();
  });

function switchAdminMenu() {
    $("body").on("click", "#to_admin_menu", function (e) {
      $('.user-sidebar').addClass('hide-nav');
  
      $('.admin-sidebar').removeClass('hide-nav').addClass('show-nav');
    });
  }

  function switchUserMenu() {
    $("body").on("click", "#to_user_menu", function (e) {
      $('.admin-sidebar').addClass('hide-nav');
  
      $('.user-sidebar').removeClass('hide-nav').addClass('show-nav');
    });
  }

/*preset*/
.show-nav {display:block !important;}
.hide-nav {display:none !important;}

/*user*/
.user-sidebar {
    background: red;
    padding: 20px;
    position: fixed;
    left: 0;
    width: 180px;
    height: 100vh;
}

.user-sidebar ul {
    list-style: none;
    margin: 0 auto;
    padding: 0;
}

.user-sidebar ul li {
    display: inline-block;
    vertical-align: top;
    width: 100%;
    text-align: left;
    margin-bottom: 20px;
}

.user-sidebar ul li a {
    color: #fff;
    text-decoration: none;
}

.user-sidebar ul li a:hover {
    color: yellow;
}

.switch-btn {
    border: 1px solid blue;
    padding: 10px;
    display:block;
    width:100%;
    text-align: center;
    text-decoration: none;
    background: yellow;
    color: blue;
    box-sizing:border-box;
}

.switch-btn:hover {
    background: #fff;
}

.user-sidebar .sidebar-footer {
    margin-top: 20vh;
}


/*admin*/
.admin-sidebar {
    background: green;
    padding: 20px;
    position: fixed;
    left: 0;
    width: 180px;
    height: 100vh;
}

.admin-sidebar ul {
    list-style: none;
    margin: 0 auto;
    padding: 0;
}

.admin-sidebar ul li {
    display: inline-block;
    vertical-align: top;
    width: 100%;
    text-align: left;
    margin-bottom: 20px;
}

.admin-sidebar ul li a {
    color: #fff;
    text-decoration: none;
}

.admin-sidebar ul li a:hover {
    color: yellow;
}


.admin-sidebar .sidebar-footer {
    margin-top: 20vh;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!--User Sidebar-->
<nav class="user-sidebar show-nav">
    <ul>
        <li class="active">
            <a href="user_test_1.html"><span>User Test 1</span></a>
        </li>
        <li>
            <a href="user_test_2.html"></i><span>User Test 2</span></a>
        </li>
    </ul>

    <div class="sidebar-footer">
            <a href="javascript:void();" id="to_admin_menu" class="switch-btn"><span>User Menu</span></a>
    </div>

</nav>

<!--Admin Sidebar-->
<nav class="admin-sidebar hide-nav">
    <ul>
        <li class="active">
            <a href="admin_test_1.html"><span>Admin Test 1</span></a>
        </li>
        <li>
            <a href="admin_test_2.html"></i><span>Admin Test 2</span></a>
        </li>
    </ul>

    <div class="sidebar-footer">
            <a href="javascript:void();" id="to_user_menu" class="switch-btn"><span>Admin Menu</span></a>
    </div>

</nav>

Answer 1

我希望这是您正在寻找的。我已将 cmets 添加到定义所有动画的 CSS 中。

$(document).ready(function() {
  // load the functions
  switchAdminMenu();
  switchUserMenu();
});

function switchAdminMenu() {
  $("body").on("click", "#to_admin_menu", function(e) {
    $('.user-sidebar').addClass('hide-nav');

    $('.admin-sidebar').removeClass('hide-nav').addClass('show-nav');
  });
}

function switchUserMenu() {
  $("body").on("click", "#to_user_menu", function(e) {
    $('.admin-sidebar').addClass('hide-nav');

    $('.user-sidebar').removeClass('hide-nav').addClass('show-nav');
  });
}

/*preset*/
/*changing the margin-left*/
.show-nav {margin-left: 0;}
.hide-nav {margin-left: -220px;}

/*user*/
.user-sidebar {
    background: red;
    padding: 20px;
    position: fixed;
    left: 0;
    width: 180px;
    height: 100vh;
    transition: all 700ms; /* Added for animation */
}

.user-sidebar ul {
    list-style: none;
    margin: 0 auto;
    padding: 0;
}

.user-sidebar ul li {
    display: inline-block;
    vertical-align: top;
    width: 100%;
    text-align: left;
    margin-bottom: 20px;
}

.user-sidebar ul li a {
    color: #fff;
    text-decoration: none;
}

.user-sidebar ul li a:hover {
    color: yellow;
}

.switch-btn {
    border: 1px solid blue;
    padding: 10px;
    display:block;
    width:100%;
    text-align: center;
    text-decoration: none;
    background: yellow;
    color: blue;
    box-sizing:border-box;
}

.switch-btn:hover {
    background: #fff;
}

.user-sidebar .sidebar-footer {
    margin-top: 20vh;
}


/*admin*/
.admin-sidebar {
    background: green;
    padding: 20px;
    position: fixed;
    left: 0;
    width: 180px;
    height: 100vh;
    transition: all 700ms; /* Added for animation */
}

.admin-sidebar ul {
    list-style: none;
    margin: 0 auto;
    padding: 0;
}

.admin-sidebar ul li {
    display: inline-block;
    vertical-align: top;
    width: 100%;
    text-align: left;
    margin-bottom: 20px;
}

.admin-sidebar ul li a {
    color: #fff;
    text-decoration: none;
}

.admin-sidebar ul li a:hover {
    color: yellow;
}


.admin-sidebar .sidebar-footer {
    margin-top: 20vh;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!--User Sidebar-->
<nav class="user-sidebar show-nav">
  <ul>
    <li class="active">
      <a href="user_test_1.html"><span>User Test 1</span></a>
    </li>
    <li>
      <a href="user_test_2.html"></i><span>User Test 2</span></a>
    </li>
  </ul>

  <div class="sidebar-footer">
    <a href="javascript:void();" id="to_admin_menu" class="switch-btn"><span>User Menu</span></a>
  </div>

</nav>

<!--Admin Sidebar-->
<nav class="admin-sidebar hide-nav">
  <ul>
    <li class="active">
      <a href="admin_test_1.html"><span>Admin Test 1</span></a>
    </li>
    <li>
      <a href="admin_test_2.html"></i><span>Admin Test 2</span></a>
    </li>
  </ul>

  <div class="sidebar-footer">
    <a href="javascript:void();" id="to_user_menu" class="switch-btn"><span>Admin Menu</span></a>
  </div>

</nav>