Плавно открыть блок с флажками, нажав на картинку

ProgramBox

Плавно открыть блок с флажками, нажав на картинку

Post author:admin
Запись опубликована:10 февраля, 2023
Post category:Вопросы по программированию

#javascript #jquery

Вопрос:

Я пытаюсь реализовать переключение блоков с помощью картинок. Функциональность примерно такая: если выбрана первая картинка, тогда отображается первый блок флажков, если второй, то второй блок флажков. Подскажите, как я могу это реализовать на моем примере макета

https://jsfiddle.net/h15ay46v/

 body {
  background-color: #000;
}

#switcher {
  position: absolute;
  top: 15px;
  left: 8px;
  display: flex;
  z-index: 1;
}

#switcher .first-image,
#switcher .second-image {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

#switcher .second-image {
  margin-left: 15px;
}

#switcher .first-image img.active {
  filter: drop-shadow(0 0 5px yellow);
}

#switcher .checkboxes-block {
  margin-left: 15px;
  display: flex;
  justify-content: flex-end;
  flex-direction: column;
}

#switcher .checkboxes-block li {
  display: inline-block;
  margin-bottom: 10px;
  margin-right: 10px;
}

#switcher .checkboxes-block .styled-checkbox {
  position: absolute;
  opacity: 0;
}

#switcher .checkboxes-block .styled-checkbox label {
  position: relative;
  cursor: pointer;
  padding: 0;
  color: white;
}

#switcher .checkboxes-block .styled-checkbox label:before {
  content: '';
  margin-right: 10px;
  display: inline-block;
  vertical-align: text-top;
  width: 14px;
  height: 14px;
  background: transparent;
  border: 2px white solid;
  border-radius: 4px;
}

#switcher .checkboxes-block .styled-checkbox:hover label:before {
  background: #ffffff;
}

#switcher .checkboxes-block .styled-checkbox:focus label:before {
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.12);
}

#switcher .checkboxes-block .styled-checkbox:checked label:before {
  background: #ffffff;
}

#switcher .checkboxes-block .styled-checkbox:checked label:after {
  content: '';
  position: absolute;
  left: 2px;
  top: 8px;
  background: white;
  width: 2px;
  height: 2px;
  box-shadow: 2px 0 0 black, 4px 0 0 black, 4px -2px 0 black, 4px -4px 0 black, 4px -6px 0 black, 4px -8px 0 black;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

#switcher .checkboxes-block .styled-checkbox:disabled label {
  color: #b8b8b8;
  cursor: auto;
}

#switcher .checkboxes-block .styled-checkbox:disabled label:before {
  box-shadow: none;
  background: #ddd;
}

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="switcher">
  <div class="first-image">
    <img class="active" width="50" height="44" src="https://image.freepik.com/free-icon/information-logotype-circle_318-9441.jpg" alt="" />
  </div>
  <div class="second-image">
    <img width="66" height="54" src="https://image.freepik.com/free-icon/calendar-icon-black_318-9776.jpg" alt="" />
  </div>

  <div class="checkboxes-block" style="margin-left: 15px;">
    <ul class="unstyled centered">
      <li>
        <input class="styled-checkbox" id="styled-checkbox-1" type="checkbox" value="value1">
        <label for="styled-checkbox-1">Checkbox 1</label>
      </li>
      <li>
        <input class="styled-checkbox" id="styled-checkbox-2" type="checkbox" value="value2" checked="">
        <label for="styled-checkbox-2">Checkbox 2</label>
      </li>
      <li>
        <input class="styled-checkbox" id="styled-checkbox-3" type="checkbox" value="value3">
        <label for="styled-checkbox-3">Checkbox 3</label>
      </li>
    </ul>
  </div>

  <div style="display: none" class="checkboxes-block" style="margin-left: 15px;">
    <ul class="unstyled centered">
      <li>
        <input class="styled-checkbox" id="styled-checkbox-4" type="checkbox" value="value4">
        <label for="styled-checkbox-4">Checkbox 4</label>
      </li>
      <li>
        <input class="styled-checkbox" id="styled-checkbox-5" type="checkbox" value="value5">
        <label for="styled-checkbox-5">Checkbox 5</label>
      </li>
      <li>
        <input class="styled-checkbox" id="styled-checkbox-6" type="checkbox" value="value6">
        <label for="styled-checkbox-6">Checkbox 6</label>
      </li>
    </ul>
  </div>
</div>

Ответ №1:

 var lastClicked = $('.first-image');
$(document).on('click', '.first-image', function() {
  if (lastClicked.index() == $(this).index())
    return;
  $('.first-block').show();
  lastClicked.find('.active').removeClass();
  $(this).find('img').addClass('active');
  $('.second-block').hide();
  lastClicked = $(this);
});

$(document).on('click', '.second-image', function() {
  if (lastClicked.index() == $(this).index())
    return;
  $('.second-block').show();
  lastClicked.find('.active').removeClass();
  $(this).find('img').addClass('active');
  $('.first-block').hide();
  lastClicked = $(this);
});

 body {
  background-color: #000;
}

#switcher {
  position: absolute;
  top: 15px;
  left: 8px;
  display: flex;
  z-index: 1;
}

#switcher .first-image,
#switcher .second-image {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

#switcher .second-image {
  margin-left: 15px;
}

#switcher .first-image img.active {
  filter: drop-shadow(0 0 5px yellow);
}

#switcher .checkboxes-block {
  margin-left: 15px;
  display: flex;
  justify-content: flex-end;
  flex-direction: column;
}

#switcher .checkboxes-block li {
  display: inline-block;
  margin-bottom: 10px;
  margin-right: 10px;
}

#switcher .checkboxes-block .styled-checkbox {
  position: absolute;
  opacity: 0;
}

#switcher .checkboxes-block .styled-checkbox label {
  position: relative;
  cursor: pointer;
  padding: 0;
  color: white;
}

#switcher .checkboxes-block .styled-checkbox label:before {
  content: '';
  margin-right: 10px;
  display: inline-block;
  vertical-align: text-top;
  width: 14px;
  height: 14px;
  background: transparent;
  border: 2px white solid;
  border-radius: 4px;
}

#switcher .checkboxes-block .styled-checkbox:hover label:before {
  background: #ffffff;
}

#switcher .checkboxes-block .styled-checkbox:focus label:before {
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.12);
}

#switcher .checkboxes-block .styled-checkbox:checked label:before {
  background: #ffffff;
}

#switcher .checkboxes-block .styled-checkbox:checked label:after {
  content: '';
  position: absolute;
  left: 2px;
  top: 8px;
  background: white;
  width: 2px;
  height: 2px;
  box-shadow: 2px 0 0 black, 4px 0 0 black, 4px -2px 0 black, 4px -4px 0 black, 4px -6px 0 black, 4px -8px 0 black;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

#switcher .checkboxes-block .styled-checkbox:disabled label {
  color: #b8b8b8;
  cursor: auto;
}

#switcher .checkboxes-block .styled-checkbox:disabled label:before {
  box-shadow: none;
  background: #ddd;
}

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="switcher">
  <div class="first-image">
    <img class="active" width="50" height="44" src="https://image.freepik.com/free-icon/information-logotype-circle_318-9441.jpg" alt="" />
  </div>
  <div class="second-image">
    <img width="66" height="54" src="https://image.freepik.com/free-icon/calendar-icon-black_318-9776.jpg" alt="" />
  </div>

  <div class="checkboxes-block first-block" style="margin-left: 15px;">
    <ul class="unstyled centered">
      <li>
        <input class="styled-checkbox" id="styled-checkbox-1" type="checkbox" value="value1">
        <label for="styled-checkbox-1">Checkbox 1</label>
      </li>
      <li>
        <input class="styled-checkbox" id="styled-checkbox-2" type="checkbox" value="value2" checked="">
        <label for="styled-checkbox-2">Checkbox 2</label>
      </li>
      <li>
        <input class="styled-checkbox" id="styled-checkbox-3" type="checkbox" value="value3">
        <label for="styled-checkbox-3">Checkbox 3</label>
      </li>
    </ul>
  </div>

  <div style="display: none" class="checkboxes-block second-block" style="margin-left: 15px;">
    <ul class="unstyled centered">
      <li>
        <input class="styled-checkbox" id="styled-checkbox-4" type="checkbox" value="value4">
        <label for="styled-checkbox-4">Checkbox 4</label>
      </li>
      <li>
        <input class="styled-checkbox" id="styled-checkbox-5" type="checkbox" value="value5">
        <label for="styled-checkbox-5">Checkbox 5</label>
      </li>
      <li>
        <input class="styled-checkbox" id="styled-checkbox-6" type="checkbox" value="value6">
        <label for="styled-checkbox-6">Checkbox 6</label>
      </li>
    </ul>
  </div>
</div>

1. «Не удается прочитать свойство «индекс» null» скажите мне, пожалуйста, почему?

2. Проверьте имена ваших классов в вашем html и выровняйте его с jQuery. Я добавил first-block second-block классы с checkboxes-block классом.

Ответ №2:

Что-то вроде этого?

Возможно, вы захотите переместить divs за пределы контейнера

 $(function() {
  $(".swimage").on("click",function() {
    const block = $(".checkboxes-block").eq($(this).index());
    block.siblings(".checkboxes-block").hide("slow")
    block.slideToggle("slow")
  })
})

 body {
  background-color: #000;
}

#switcher {
  position: absolute;
  top: 15px;
  left: 8px;
  display: flex;
  z-index: 1;
}

#switcher .first-image,
#switcher .second-image {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

#switcher .second-image {
  margin-left: 15px;
}

#switcher .first-image img.active {
  filter: drop-shadow(0 0 5px yellow);
}

#switcher .checkboxes-block {
  margin-left: 15px;
  display: flex;
  justify-content: flex-end;
  flex-direction: column;
}

#switcher .checkboxes-block li {
  display: inline-block;
  margin-bottom: 10px;
  margin-right: 10px;
}

#switcher .checkboxes-block .styled-checkbox {
  position: absolute;
  opacity: 0;
}

#switcher .checkboxes-block .styled-checkbox label {
  position: relative;
  cursor: pointer;
  padding: 0;
  color: white;
}

#switcher .checkboxes-block .styled-checkbox label:before {
  content: '';
  margin-right: 10px;
  display: inline-block;
  vertical-align: text-top;
  width: 14px;
  height: 14px;
  background: transparent;
  border: 2px white solid;
  border-radius: 4px;
}

#switcher .checkboxes-block .styled-checkbox:hover label:before {
  background: #ffffff;
}

#switcher .checkboxes-block .styled-checkbox:focus label:before {
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.12);
}

#switcher .checkboxes-block .styled-checkbox:checked label:before {
  background: #ffffff;
}

#switcher .checkboxes-block .styled-checkbox:checked label:after {
  content: '';
  position: absolute;
  left: 2px;
  top: 8px;
  background: white;
  width: 2px;
  height: 2px;
  box-shadow: 2px 0 0 black, 4px 0 0 black, 4px -2px 0 black, 4px -4px 0 black, 4px -6px 0 black, 4px -8px 0 black;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

#switcher .checkboxes-block .styled-checkbox:disabled label {
  color: #b8b8b8;
  cursor: auto;
}

#switcher .checkboxes-block .styled-checkbox:disabled label:before {
  box-shadow: none;
  background: #ddd;
}

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="switcher">
  <div class="first-image swimage">
    <img class="active" width="50" height="44" src="https://image.freepik.com/free-icon/information-logotype-circle_318-9441.jpg" alt="" />
  </div>
  <div class="second-image swimage">
    <img width="66" height="54" src="https://image.freepik.com/free-icon/calendar-icon-black_318-9776.jpg" alt="" />
  </div>

  <div class="checkboxes-block" style="margin-left: 15px;">
    <ul class="unstyled centered">
      <li>
        <input class="styled-checkbox" id="styled-checkbox-1" type="checkbox" value="value1">
        <label for="styled-checkbox-1">Checkbox 1</label>
      </li>
      <li>
        <input class="styled-checkbox" id="styled-checkbox-2" type="checkbox" value="value2" checked="">
        <label for="styled-checkbox-2">Checkbox 2</label>
      </li>
      <li>
        <input class="styled-checkbox" id="styled-checkbox-3" type="checkbox" value="value3">
        <label for="styled-checkbox-3">Checkbox 3</label>
      </li>
    </ul>
  </div>

  <div style="display: none" class="checkboxes-block" style="margin-left: 15px;">
    <ul class="unstyled centered">
      <li>
        <input class="styled-checkbox" id="styled-checkbox-4" type="checkbox" value="value4">
        <label for="styled-checkbox-4">Checkbox 4</label>
      </li>
      <li>
        <input class="styled-checkbox" id="styled-checkbox-5" type="checkbox" value="value5">
        <label for="styled-checkbox-5">Checkbox 5</label>
      </li>
      <li>
        <input class="styled-checkbox" id="styled-checkbox-6" type="checkbox" value="value6">
        <label for="styled-checkbox-6">Checkbox 6</label>
      </li>
    </ul>
  </div>
</div>

Вопрос:

Ответ №1:

Комментарии:

Ответ №2:

Вам также может понравиться

Сгруппируйте по нескольким столбцам и рассчитайте годовые и ежемесячные процентные изменения в R

phpunit: не удается эффективно определить количество при тестировании функций laravel

Курсор android sms — как получить countryISO