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

Posted 2023-05-08

【中文标题】如何通过 jQuery 在菜单之间切换？

【英文标题】：How to switch between menus via jQuery?

【发布时间】：2022-01-03 00:09:13

【问题描述】：

单击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>

【参考方案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>