SlideToggle+slideup은 휴대폰 접기 메뉴 효과 예제 코드를 구현합니다.

이 글에서는 휴대폰에서 접는 메뉴 효과를 구현하기 위한 슬라이드토글+슬라이드업을 주로 소개합니다. 관심 있는 친구들이 참고하면 도움이 될 것입니다.

메뉴 축소 효과에 대해서는 인터넷에 bootstrap의 Collapse 등 사용하기 쉽고 매우 간단한 플러그인이 많이 있습니다. 그러나 bootstrap 프레임워크를 사용하지 않으면 많은 문제가 발생하게 됩니다. 기본 스타일 수정, 코드 중복 등 불필요한 문제가 발생합니다. 일반적으로 인터넷에 jQuery 기반 플러그인이 많이 있지만 너무 번거로워서 jQuery 자체 기능을 사용하는 방법을 알려 드리겠습니다. 이 효과를 얻으려면 말할 것도 없이 다음 코드로 이동하세요.

HTML 부분:

<p class="box">
  <!-- 内容-->
  <ul class="inner">
    <li class="inner_title">绿色校园<span></span></li>
    <ol class="inner_style">
      <li>篮球场</li>
      <li>篮球场</li>
      <li>篮球场</li>
      <li>篮球场</li>
      <li>篮球场</li>
    </ol>
    <li class="inner_title">绿色校园<span></span></li>
    <ol class="inner_style">
      <li>篮球场</li>
      <li>篮球场</li>
      <li>篮球场</li>
      <li>篮球场</li>
      <li>篮球场</li>
      <li>篮球场</li>
    </ol>
    <li class="inner_title">绿色校园<span></span></li>
    <ol class="inner_style">
      <li>篮球场</li>
      <li>篮球场</li>
      <li>篮球场</li>
      <li>篮球场</li>
      <li>篮球场</li>
      <li>篮球场</li>
    </ol>
  </ul>
</p>

CSS 부분:

<style>
  body{
    background: #dddddd;
  }
  .inner{
    background: #fff;
    width: 100%;
    overflow: hidden;
    list-style: none;
    margin: 0;
    padding: 0;
  }
  .inner .inner_title{
    background-color: #fff;
    width: 100%;
    padding: 0 2.5%;
    border-bottom: 1px solid #efefef;
    color: #343434;
    height: 40px;
    line-height: 40px;
    font-size: 16px;
    position: relative;
  }
  .inner .inner_title span{
    position: absolute;
    width: 20px;
    height: 20px;
    top: 50%;
    margin-top: -10px;
    right: 6%;
    background: url("images/arow_left.png") no-repeat center;
  }
  .inner .inner_title.active{
    color: #4db780;
  }
  .inner .inner_title.active span{
    background: url("images/arow_down.png") no-repeat center;
  }
  /*弹出的二级分类处理*/
  .inner .inner_style{
    margin: 0;
    list-style: none;
    width: 100%;
    background-color: #efefef;
    overflow: hidden;
    padding: 15px 3%;
  }
  .inner .inner_style li{
    float: left;
    color: #333;
    font-size: 14px;
    width: 21%;
    text-align: center;
    line-height: 30px;
    margin-right: 5%;
  }
</style>

js 부분(jQuery 소개를 기억하세요):

<script>
  /**处理折叠效果**/
  (function ($) {
    $.fn.Fold = function (options) {
      //默认参数设置
      var settings = {
        speed: 300 //折叠速度(值越大越慢)
      }
      //不为空则合并参数
      if (options)
        $.extend(settings, options);

      //遵循链式原则
      return this.each(function () {
        //为每个li元素绑定点击事件
        $("> li", this).each(function () {
          $(this).bind("click", function () {
            //单击之前先判断当前菜单是否折叠
            if($(this).hasClass(&#39;active&#39;)){//折叠状态
              $(".inner ol").slideUp(&#39;500&#39;);//使用slideup()折叠其他选项
              $(this).removeClass(&#39;active&#39;);//移除选中样式
            }else{//打开状态
              $(this).siblings(&#39;li&#39;).removeClass(&#39;active&#39;);
              $(".inner ol").slideUp(&#39;500&#39;);//使用slideup()折叠其他选项
              $(this).addClass(&#39;active&#39;)//添加选中样式
              $(this).next("ol").slideToggle(settings.speed);
            }
          });
        });
        //默认折叠
        $("> ol", this).hide();
      });
    }
  })(jQuery);
  $(".inner").Fold();//调用
</script>

효과는 다음과 같습니다:

관련 추천:

간략한 분석 jquery에서 토글과 slideToggle의 차이점

jquery 숨기기, 이벤트 표시 및 프롬프트 콜백, 페이드 인 및 아웃 페이드토글, 슬라이드 인 및 아웃 슬라이드토글, 애니메이션 애니메이션 중지 애니메이션 중지

JQury 슬라이드토글 깜박임 문제 및 해결 방법

위 내용은 SlideToggle+slideup은 휴대폰 접기 메뉴 효과 예제 코드를 구현합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!