主页 / 问题 / 983412
Accepted
zeni1agent
Asked:2020-05-20 16:14:27 +0000 UTC2020-05-20 16:14:27 +0000 UTC

这段代码可以缩短吗？

  • 772

我可以以某种方式缩短此代码而不会失去其功能吗？

 // Перевод в проценты
  function per(num, par) {
    return Number(num / 100 * par);
  }

  var block_size = 200;
  var block_sped = 600;
 //Анимацыя вперед
  function ani_show(sped, name) {
      $(name).animate({ height: (per(block_size, 40)) + 'px'}, per(sped, 90),"linear", (function(){ 
        $(name).animate({ height: (block_size) + 'px'},sped, "linear",(function(){   }));
      }));
  }
 //Анимацыя назад
function ani_none(sped, name, name2) {
  $(name).animate({ height: (block_size) + 'px'},0, "linear",(function(){ 
    $(name).animate({ height: (per(block_size, 80)) + 'px'},per(sped, 10),"linear", (function(){
      $(name).animate({ height: (0) + 'px'},per(sped, 50), "linear",(function(){ 
        ani_show(sped, name2);
      }));
    }));
  }));
}



$( ".but1" ).click(function() {
  var check1_1 =  parseInt($(".block2").css("height"));
  var check2_1 =  parseInt($(".block3").css("height"));
  if(check1_1 == block_size){
    ani_none(block_sped, ".block2", ".block1");
  }
  if(check2_1 == block_size){
    ani_none(block_sped, ".block3", ".block1");
  } 
});

$( ".but2" ).click(function() {
  var check1_2 =  parseInt($(".block1").css("height"));
  var check2_2 =  parseInt($(".block3").css("height"));
  if(check1_2 == block_size){
    ani_none(block_sped, ".block1", ".block2");
  }
  if(check2_2 == block_size){
    ani_none(block_sped, ".block3", ".block2");
  } 
});

$( ".but3" ).click(function() {
  var check1_3 = parseInt( $(".block1").css("height"));
  var check2_3 = parseInt( $(".block2").css("height"));
  if(check1_3 == block_size){
    ani_none(block_sped, ".block1", ".block3");
  }
  if(check2_3 == block_size){
    ani_none(block_sped, ".block2", ".block3");
  } 
});
div{
  background-color:#00fff0;
  overflow:hidden;
  font-size:30px;
  height: 0px; 
}

.block1{
  height: 200px; 
}
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<a class="but1">but1</a>
<a class="but2">but2</a>
<a class="but3">but3</a>
<div class="block1">text1</div>
<div class="block2">text2</div>
<div class="block3">text3</div>

css

2 个回答

  1. 好吧，我可以用纯 css 做到这一点

    div{
  background-color:#00fff0;
  overflow:hidden;
  font-size:30px;
  height: 0px; 
  animation-duration: 3s;
  animation-timing-function: linear;  
  animation-iteration-count: 1; 
  animation-name:revers ;
}

.but1:checked ~ .block1{
   
   height: 200px; 
  
  animation-duration: 3s;
  animation-timing-function: linear;  
  animation-iteration-count: 1; 
  animation-name:show;
}


.but2:checked ~ .block2{
 
  
   height: 200px; 
  
  animation-duration: 3s;
  animation-timing-function: linear;  
  animation-iteration-count: 1; 
  animation-name:show;
}

.but3:checked ~ .block3{
  color:#f0f;
  
   height: 200px; 
  
  animation-duration: 3s;
  animation-timing-function: linear;  
  animation-iteration-count: 1; 
  animation-name:show;
}


@keyframes  show {
0% { max-height: 0px; }	
50% { max-height: 0px; }
70% { max-height: 70px; }
100% { max-height: 200px; }
}

@keyframes  revers {
100% { height: 0px; }	
50% { height: 0px; }
30% { height: 70px; }
0% { height: 200px; }
}
    <input type="radio" class="but1" checked name="rt">
<input type="radio" class="but2" name="rt">
<input type="radio" class="but3" name="rt">

<div class="block1">text1</div>
<div class="block2">text2</div>
<div class="block3">text3</div>

    • 3
  2. Best Answer

    缩短（重写）：

    提琴手

    var timeout; /* Сюда будет сохраняться таймаут... */
$('.but').on('click', function(){
  clearTimeout(timeout);/*...чтобы перед каждым кликом удалить его */
  $('.but').removeClass('active');
  $(this).addClass('active');

  $('.block').removeClass('show');
  /* Находим номер кликнутой кнопки */
  var index = $(this).index('.but');
  timeout = setTimeout( function(){
    /* По этому же номеру открываем нужную вкладку*/
    $('.block').eq( index ).addClass('show');
  }, 1000);   
  /* Только не сразу, а через секунду - когда предыдущая успеет закрыться */
  /* Удаление таймаута вначале клика было необходимо, иначе если быстро кликать на несколько 
  кнопок - сразу откроются все (от оставшегося таймаута с предыдущего клика) */ 
});
    .block {
  /* transition будет работать только для height */
  transition: height 1s linear; 
  height: 0px;
  background-color:#00fff0;
  overflow:hidden;
  font-size:30px;
}

.show {
  height: 200px;
}

.but {
  display: inline-block; 
  border: 2px solid #236; cursor: pointer;
  padding: 3px 8px; margin: 0 4px 7px 0;
}
.active {background-color: #236; color: white;}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<a class="but active">but1</a>
<a class="but">but2</a>
<a class="but">but3</a>

<div class="block show">text1</div>
<div class="block">text2</div>
<div class="block">text3</div>

    如果在此类任务中您亲自戳每个按钮的代码，那么就会出现问题）然后您想重做 4 个按钮的选项并且厌倦了重写。

    昨天我提供了一个链接并没有白费）JavaScript 可切换选项卡 - 选项卡（和一点 CSS） - 在第二段中，一个类似的示例。

    • 1

相关问题