jQuery实现侧边栏隐藏与显示的方法详解

<div class="left_option">
  <div class="option_title active">
    本周食谱
  </div>
  <ul class="this_week nav-list">
    <li style="color:#ED6168" date-id="1" class="weekDate">周一食谱</li>
    <li class="weekDate" date-id="2">周二食谱</li>
    <li class="weekDate" date-id="3">周三食谱</li>
    <li class="weekDate" date-id="4">周四食谱</li>
    <li class="weekDate" date-id="5">周五食谱</li>
    <li class="weekDate" date-id="6">周六食谱</li>
    <li class="weekDate" date-id="7">周日食谱</li>
  </ul>
  <div class="option_title">
    下周食谱
  </div>
  <ul class="next_week nav-list" style="display:none">
    <li date-id="1" class="weekDate2">周一食谱</li>
    <li class="weekDate2" date-id="2">周二食谱</li>
    <li class="weekDate2" date-id="3">周三食谱</li>
    <li class="weekDate2" date-id="4">周四食谱</li>
    <li class="weekDate2" date-id="5">周五食谱</li>
    <li class="weekDate2" date-id="6">周六食谱</li>
    <li class="weekDate2" date-id="7">周日食谱</li>
  </ul>
</div>

//控制侧边栏的显示与隐藏
$(".option_title").click(function(){
  $(this).addClass("in");
  //对不是类class为in的元素移除active类
  $(".option_title").not(".in").removeClass("active");
  //多次点击设置改元素的类为active或不是active
  $(this).toggleClass("active");
  //以滑动方式隐藏所有list
  $(".nav-list").slideUp();
  //以滑动方式显示元素
  $(".active").next().slideDown();
  //移除选中optionDiv的in类
  $(this).removeClass("in");
});