jquery实现左右滑动菜单效果代码

以下是详细的jQuery实现左右滑动菜单效果的攻略。

1. 基础代码结构

首先需要添加jQuery库，然后在HTML中添加基础页面结构，包括左侧栏目和右侧内容区域，代码如下：

<!DOCTYPE html>
<html>
<head>
  <title>jQuery实现左右滑动菜单效果</title>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    #wrapper {
      width: 100%;
      height: 100vh;
      display: flex;
    }

    #sidebar {
      width: 200px;
      height: 100%;
      background-color: #333;
      color: #fff;
      overflow: hidden;
      transition: width .3s ease-in-out;
    }

    #content {
      flex: 1;
      height: 100%;
      background-color: #eee;
      overflow: hidden;
    }
  </style>
</head>
<body>
  <div id="wrapper">
    <div id="sidebar">
      <ul>
        <li>菜单项1</li>
        <li>菜单项2</li>
        <li>菜单项3</li>
        <li>菜单项4</li>
      </ul>
    </div>
    <div id="content"></div>
  </div>
</body>
</html>

在这里，我们以一个id名为wrapper的div作为整个容器，左侧栏目使用一个id名为sidebar的div来实现。右侧内容区域使用一个id名为content的div来实现。

2. 实现左右滑动效果

我们需要使用jQuery实现点击左右箭头实现左侧栏目隐藏和展示的动作。代码如下：

$(function() {
  var $wrapper = $('#wrapper');
  var $sidebar = $('#sidebar');
  var $content = $('#content');
  // 点击右侧箭头
  $($wrapper).on('click', '.right-arrow', function() {
    $sidebar.animate({width: '0'}, 300);
    $content.animate({marginLeft: '0'}, 300);
  });
  // 点击左侧箭头
  $($wrapper).on('click', '.left-arrow', function() {
    $sidebar.animate({width: '200px'}, 300);
    $content.animate({marginLeft: '200px'}, 300);
  });
});

我们在jQuery的$(function(){})方法中获取到wrapper,sidebar和content三个div元素，并分别给左右箭头添加了点击事件，点击事件时通过jQuery中的animate()方法来实现动画效果。

3. 示例展示

下面我们分别给出两个示例，一个是点击菜单项后展示对应内容的效果，另一个是左侧栏目添加滚动条的效果。

3.1 点击菜单项展示对应内容

$(function() {
  // 若打开此示例，请先添加好对应的内容和id
  $('#sidebar ul li').click(function() {
    var index = $(this).index() + 1;
    $('#content').html('这是内容' + index + '区域');
  });
});

我们给每个菜单项添加了点击事件，通过index() + 1方法获取到当前点击的菜单项的索引值，并通过html()方法向右侧的内容区域中添加内容。

3.2 左侧栏目添加滚动条

#sidebar ul {
  height: calc(100vh - 50px);
  overflow-y: auto;
}

我们通过CSS的height属性设置了左侧栏目的高度，并使用calc()方法减去50px的高度，使其在内容过多时出现滚动条。使用overflow-y: auto;来设置滚动条自动出现。

到这里，我们就完成了jQuery实现左右滑动菜单效果的完整攻略。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：jquery实现左右滑动菜单效果代码 - Python技术站