jquery幻灯片's表示步骤方法

jquery slide's for step method

本文关键字：表示 方法 幻灯片 jquery      更新时间：2024-04-26

我在那里使用jquery slide（向下/向上）效果进行步骤处理。我不知道如何向上滑动id，如果没有选择，请使用查看我的小提琴，清除我的疑虑

$(function(){
        $('ul.new_checkout li > .title').on('click', function(){
            var id=$(this).attr('id');
            var rep=id.replace(/[^a-z0-9's]/gi, '').replace(/[_'s]/g, '-');
            console.log("id:" +rep);
            if(rep){
               $("#"+rep).slideDown('fast');
              }
                 })
           });
 <ul class="new_checkout">
    <li>
         <div class="title" id="step-1"> Step-1</div>
     <div class="content" id="step1"></div>
    </li>
 </ul>

如果我点击其他步骤，我如何滑上一个步骤id？帮助我完成

我终于得到了我的答案

在步骤显示之前隐藏内容。

$('ul.new_checkout li > .title').on('click', function(){
  var id=$(this).attr('id');
  var rep=id.replace(/[^a-z0-9's]/gi, '').replace(/[_'s]/g, '-');
  console.log("id:" +rep);
  if(rep){
    $('.content').slideUp('slow');
    $("#"+rep).slideDown('fast');
  }
});

$(function(){
  $('ul.new_checkout li > .title').on('click', function(){
    var id=$(this).attr('id');
    var rep=id.replace(/[^a-z0-9's]/gi, '').replace(/[_'s]/g, '-');
    console.log("id:" +rep);
    if(rep){
      $(".content").slideUp('fast');
      $("#"+rep).slideDown('fast');
    }
  })
});
<ul class="new_checkout">
  <li>
     <div class="title" id="step-1"> Step-1</div>
     <div class="content" id="step1"></div>
  </li>
 </ul>

当它把正确的一个向下滑动时，它会把另一个向上滑动。

这是最新的小提琴。

相关文章：