0

Прошу прощения за возможно нубский вопрос. Смотрел урок по 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();
    });
});

2 ответа 2

0

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

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>

0

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>

2
  • Большое спасибо. Сделал каждую пару кнопка-блок в отдельной обертке - помогло. P.S. разметки там почти нет у меня, использую бутстраповскую систему сеток и разметки через классы. 7 янв 2018 в 11:03
  • С лева от ответа есть серая галочка, если ответ помог, можно на нее нажать и принять ответ... P.S. кстати, bootstrap зло
    – Air
    7 янв 2018 в 11:44

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.