Jquery 3.2.1 toggle(), fadeToggle(), без сдвига элементов

388

09 января 2018, 13:33

Прошу прощения за возможно нубский вопрос. Смотрел урок по jquery и в самом начале возникли проблемы. допустим есть 3 кнопки и 3 блока. Кнопки в одну линию и блоки тоже. пример на рисунке 1]1

при нажатии на кнопку btn1, panel1 должна fageToggle(), например. Проблема в том, что при выполнении, блоки сдвигаются. Вот такПроблема в том, что при выполнении, блоки сдвигаются. Вот так]2 Как избежать этого?

код

    $(document).ready(function (){
    $("#btn1").on('click', function(){
        $("#panel1").fadeToggle();
    });
    $("#btn2").on('click', function(){
        $("#panel2").fadeToggle();
    });
    $("#btn3").on('click', function(){
        $("#panel3").fadeToggle();
    });
});

Answer 1

объединяйте кнопки с их целевыми элементами в единые блоки, расположенные в ряд:

var $toggle_btn = $('.block .button'); 
 
$toggle_btn.on('click', function(event) { 
  $(event.target).next().fadeToggle(); 
});

.block { 
  width: 33.33%; 
  float: left 
} 
 
.toggled { 
  display: none 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div class="block"> 
  <button class="button">toggle block 1</button> 
  <div class="toggled">block 1 content</div> 
</div> 
<div class="block"> 
  <button class="button">toggle block 2</button> 
  <div class="toggled">block 2 content</div> 
</div> 
<div class="block"> 
  <button class="button">toggle block 3</button> 
  <div class="toggled">block 3 content</div> 
</div>

Answer 2

fadeToggle()

Задает элементу

style="display: block;" или style="display: none;"

Не вижу твоих HTML CSS, но без надлежащих правил css, это нормальное поведение блоков. Не зная всех твоих намерений, точного ответа ни кто не даст... По крайней мере ты сейчас знаешь почему блоки сдвигаются. Можно обернуть каждую пару из этих трех в отдельную обертку, можно жесткое позиционирование, есть flex есть float... Это уже чего твоей душе угодно...

$(document).ready(function() { 
  $("#btn1").on("click", function() { 
    $("#panel1").fadeToggle(); 
  }); 
  $("#btn2").on("click", function() { 
    $("#panel2").fadeToggle(); 
  }); 
  $("#btn3").on("click", function() { 
    $("#panel3").fadeToggle(); 
  }); 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div id="panel1">panel1 content</div> 
<button id="btn1">btn1</button> 
<div id="panel2">panel2 content</div> 
<button id="btn2">btn2</button> 
<div id="panel3">panel3 content</div> 
<button id="btn3">btn3</button>