如何通过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

我希望这就是您想要的。我在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>