0

Смотрел урок по jQuery и там был пример с увеличением content-box по клику. Потом я решил сделать и на второй клик по примеру toggle (что бы content-box принял старые размеры если кликнуть по нему второй раз). Но придумал только вариант с добавлением переменной. Это правильно ? или есть более хорошее решение ?

$(document).ready(function () {
    var one = 1;
    $(".content-box").click(function() {
        if(one == 1){
            one = 2;
            $(".content-box").animate({
                width: '500px',
                height: '300px'
            }, 1000);
            $(".content-after").show().animate({
                opacity: 1
            });
        }else if(one == 2){
            one = 1;
            $(".content-box").animate({
                width: '240px',
                height: '70px'
            }, 500);
            $(".content-after").hide().animate({
                opacity: 0
            });
        }
    });
});
html, body, ul, li {
    margin: 5px;
    padding: 5px;
}
.content-box {
    width: 240px;
    height: 70px;
    background: dodgerblue;
    padding: 15px;
    border-radius: 8px;
}

.content-before {
    font-size: 24px;
    text-align: center;

}

.content-after {
    display: none;
    font-size: 18px;
    opacity: 0;
    color: #ffffff;

}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="content-box">
    <p class="content-before">Click me to show more !</p>
    <p class="content-after">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. A adipisci assumenda debitis error maxime molestias quae quasi reiciendis vero voluptatem?
        Amet aperiam commodi, cum debitis dolor dolorem doloremque dolores dolorum ducimus esse excepturi facere in iure maiores necessitatibus nesciunt nihil, nobis pariatur perspiciatis porro quia quisquam quo quod quos ratione!
    </p>
</div>

2 ответа 2

1

Во-первых магия с one==1/one==2 не нужна. Если уж хочешь магией заниматься, то тогда ставь значение true/false и при клике меняй one = !one;

Во-вторых у Jquery есть функция toggleclass, используй банально её, чтоб поменять класс (добавить/удалить).

В-третьих все классы с анимацией и нужными свойствами пропиши в CSS, а в Jquery как раз просто меняй класс через toggleclass

1

Необязательно состояние блока определять проверкой переменной (в вашем случае one). Достаточно проверять на наличие/отсутствие класса, например, .opened, и добавлять/убирать его через toggleClass().

Всю анимацию намного проще описать в CSS, тогда ее намного проще будет изменять (при необходимости), используй медиа-запросы.

Высоту раскрывающегося блока задавать необязательно, функции slideDown()/slideUp()/slideToggle() будет определять ее сама.

Как по мне, раскрытие/закрытие блока лучше делать при клике не на весь блок, а на определенный триггер (в вашем случае заголовок .content-before), но этого мое субъективное мнение, решать тут, конечно, вам.

Немного универсализировал ваш пример на случай, если таких раскрывающихся блоков будет несколько.

$(document).ready(function() {
  $('.content-before').click(function() {
    var block = $(this).closest('.content-box');
    if (!block.hasClass('opened')) {
      block.find(".content-after").slideDown(1000);
    } else {
      block.find(".content-after").slideUp(500);
    }
    block.toggleClass('opened');
  });
});
html,
body,
ul,
li {
  margin: 5px;
  padding: 5px;
}

* {
  box-sizing: border-box;
}

.content-box {
  width: 240px;
  background: dodgerblue;
  border-radius: 8px;
  transition: width 0.5s;
  padding: 15px;
}

.content-before {
  font-size: 24px;
  text-align: center;
}

.content-after {
  display: none;
  font-size: 18px;
  opacity: 0;
  color: #ffffff;
  transition: opacity 1s;
  width: 470px;
}

.content-box.opened {
  width: 500px;
  transition: width 1s;
}

.content-box.opened .content-after {
  opacity: 1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="content-box">
  <p class="content-before">Click me to show more !</p>
  <p class="content-after">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. A adipisci assumenda debitis error maxime molestias quae quasi reiciendis vero voluptatem? Amet aperiam commodi, cum debitis dolor dolorem doloremque dolores dolorum ducimus esse excepturi facere
    in iure maiores necessitatibus nesciunt nihil, nobis pariatur perspiciatis porro quia quisquam quo quod quos ratione!
  </p>
</div>

Если же скорость открытия/раскрытия будет одинаковой, то код можно сократить до такого варианта:

$(document).ready(function() {
  $('.content-before').click(function() {
    var block = $(this).closest('.content-box');
    block.toggleClass('opened');
    block.find('.content-after').slideToggle(1000);
  });
});
html,
body,
ul,
li {
  margin: 5px;
  padding: 5px;
}

* {
  box-sizing: border-box;
}

.content-box {
  width: 240px;
  background: dodgerblue;
  border-radius: 8px;
  transition: width 1s;
  padding: 15px;
}

.content-before {
  font-size: 24px;
  text-align: center;
}

.content-after {
  display: none;
  font-size: 18px;
  opacity: 0;
  color: #ffffff;
  transition: opacity 1s;
  width: 470px;
}

.content-box.opened {
  width: 500px;
}

.content-box.opened .content-after {
  opacity: 1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="content-box">
  <p class="content-before">Click me to show more !</p>
  <p class="content-after">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. A adipisci assumenda debitis error maxime molestias quae quasi reiciendis vero voluptatem? Amet aperiam commodi, cum debitis dolor dolorem doloremque dolores dolorum ducimus esse excepturi facere
    in iure maiores necessitatibus nesciunt nihil, nobis pariatur perspiciatis porro quia quisquam quo quod quos ratione!
  </p>
</div>

Ваш ответ

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

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