slideToggle+slideup implémente l'exemple de code d'effet de menu pliable pour téléphone portable

Cet article présente principalement slideToggle+slideup en détail pour réaliser l'effet de menu pliable sur le téléphone mobile. Il a une certaine valeur de référence. Les amis intéressés peuvent s'y référer.

Pour l'effet de réduction des menus, il existe de nombreux plug-ins sur Internet, tels que Collapse de bootstrap, qui sont faciles à utiliser et très simples. Cependant, si vous n'utilisez pas le framework bootstrap, ce sera le cas. causer beaucoup de problèmes inutiles, tels que le style par défaut, la redondance du code, etc. En général, il existe de nombreux plug-ins basés sur jQuery sur Internet, mais ils sont trop lourds. Aujourd'hui, je vais vous expliquer comment utiliser jQuery. propres fonctions pour obtenir cet effet Pas grand chose à dire, il suffit d'y aller directement Code :

Partie 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>

Partie 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>

partie js (n'oubliez pas d'introduire 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>

L'effet est le suivant :

Recommandations associées :

Une brève analyse de la différence entre bascule et slideToggle dans jquery

jquery cache et affiche les événements et invite le rappel et le fadeToggle, glissez vers l'intérieur et l'extérieur du slideToggle, l'animation anime l'arrêt de l'animation

JQury slideToggle problème de clignotement et solution

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!