Окно, которое расширяется в галерее

ProgramBox

Окно, которое расширяется в галерее

Post author:admin
Запись опубликована:31 октября, 2022
Post category:Вопросы по программированию

#javascript #html #css

#javascript #HTML #css

Вопрос:

Я пытаюсь выяснить, как расширить поле на размер некоторых полей внутри «галереи». Мне это нужно так, чтобы не запутывать другие поля и другие элементы страницы. Оно должно расширяться и сворачиваться. Есть восемь полей, и когда я нажимаю на одно из них, оно должно занимать место всех восьми полей, когда я снова нажимаю на него, оно должно свернуться до своего первоначального размера в один ящик. Он также должен показывать разное содержимое для каждого окна при расширении.

Я попытался использовать целевые свойства css и теги привязки. Какое решение вы бы, ребята, использовали?

вот моя пробная версия кода:

 <a href="#odontopediatria">
    <div class="trat-card">
        <div class="trat-icone"><i class="fas fa-tooth"></i></div>
        <div class="trat-titulo">Odontopediatria</div>
    </div>
    <a href="#_" class="lightbox" id="odontopediatria">
        <div class="lightbox-conteudo">
            <div class="trat-texto">
                <i class="fas fa-tooth fa-3x"></i>
                <p>Odontopediatria é a especialidade que tem como objetivo o diagnóstico, a prevenção, o tratamento e o controle dos problemas de saúde bucal do bebê, da criança e do adolescente.
                </p>
            </div>
        </div>
    </a>
</a>


    
.lightbox {
  text-align: center;
  color: white;
  font-size: 22px;
  display: none;
}

.lightbox:target {
  display: block;
  top: 0;
}

.lightbox div:nth-child(n) {
  position: absolute;
    left: 0;
  display: flex;
    flex-direction: column;
    width: 100%;
    height: 306px;
    border-radius: 4px;
    align-items: center;
    justify-content: space-around;
  padding: 30px;
  margin: 0 auto;
}

Ответ №1:

попробуйте что-то вроде этого

   .container{
    display: flex;
    height: 400px;
    width: 600px;
    position: relative;
    flex-wrap: wrap;

  }
  .box{
    flex: 0 0 200px;
    text-align: center;
    justify-content: center;
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    align-content: center;
  }
  .box:active{
    height: 100%;
    width: 100%;
    position: absolute;
    z-index: 2;
    top: 0;
    right: 0;
  }
  .box.box1{
    background-color: red;
  }
  .box.box2{
    background-color: greenyellow;
  }
  .box.box4{
    background-color: blue;
  }
  .box.box5{
    background-color: red;
  }
  .box.box6{
    background-color: yellow;
  }
  .box.box3{
    background-color: orange;
  }
  .box1:active::after{
    content: 'some text for the box1';
      flex: 0 0 100%;
  }
  .box2:active::after{
    content: 'some text for the box2';
      flex: 0 0 100%;
  }
  .box3:active::after{
    content: 'some text for the box3';
      flex: 0 0 100%;
  }
  .box4:active::after{
    content: 'differnt text for box 4';
      flex: 0 0 100%;
  }
  .box5:active::after{
    content: 'hello there';
      flex: 0 0 100%;
  }
  .box6:active::after{
    content: 'ciao bello';
      flex: 0 0 100%;
  }
  a{
      flex: 0 0 100%;
  }

   <div class="container">
    <div class="box box2"><a>box1</a></div>
    <div class="box box1"><a>box2</a></div>
    <div class="box box3"><a>box2</a></div>
    <div class="box box4"><a>box2</a></div>
    <div class="box box5"><a>box2</a></div>
    <div class="box box6"><a>box2</a></div>
  </div>

Развернуть фрагмент

1. если вам нужно, чтобы они оставались открытыми, используйте Js для передачи flex: 0 0 100% события щелчка. Вы могли бы использовать класс переключения

2. Большое вам спасибо. Я действительно ценю ваше время за это.

Ответ №2:

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

 $(document).ready(function() {
  $(".expandable_box").click(function() {
    $(this).parent(".main_col").toggleClass("expanded");
  });
});

 body {
  margin: 0px;
}

* {
  box-sizing: border-box;
}

.main_container {
  padding: 0px 5px;
}

.main_row {
  display: flex;
  flex-wrap: wrap;
  margin: 0px -5px;
  position: relative;
}

.main_col {
  -ms-flex: 0 0 25%;
  flex: 0 0 25%;
  max-width: 25%;
  padding: 0px 5px;
  margin: 5px 0px;
  text-align: center;
}

.main_col.expanded {
  position: absolute;
  -ms-flex: 0 0 100%;
  flex: 0 0 100%;
  max-width: 100%;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
}

.expandable_box {
  padding: 30px;
  background-color: #3ca6b6;
  color: #fff;
  border-radius: 5px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-decoration: none;
}

.expanded .expandable_box {
  min-height: 100%;
  background-color: #0c798a;
}

.expandable_box h4 {
  margin: 20px 0px 0px;
}

.expandable_box p {
  display: none;
  margin: 0px;
  padding: 15px 0px 0px;
  visibility: hidden;
  opacity: 0;
}

.expanded .expandable_box p {
  display: block;
  visibility: visible;
  opacity: 1;
}

@media(max-width: 991px) {
  .main_col {
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: 50%;
  }
}

 <!DOCTYPE html>
<html>

<head>
  <title>Same Place Expander</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<body>
  <div class="main_container">
    <div class="main_row">
      <div class="main_col">
        <a href="javascript:void(0);" class="expandable_box">
          <i class="fas fa-tooth fa-lg"></i>
          <h4>Lorem Ipsum</h4>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam fringilla dapibus est, et cursus justo. Aenean lobortis porta nunc, nec ultricies lectus molestie id. Nulla sollicitudin elementum consectetur. Pellentesque gravida nunc eget efficitur vestibulum.
            In lorem lacus, maximus eu bibendum quis, fringilla at lectus. Vestibulum fringilla quam sed diam mattis, non congue arcu efficitur.
          </p>
        </a>
      </div>
      <div class="main_col">
        <a href="javascript:void(0);" class="expandable_box">
          <i class="fas fa-tooth fa-lg"></i>
          <h4>Lorem Ipsum</h4>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam fringilla dapibus est, et cursus justo. Aenean lobortis porta nunc, nec ultricies lectus molestie id. Nulla sollicitudin elementum consectetur. Pellentesque gravida nunc eget efficitur vestibulum.
            In lorem lacus, maximus eu bibendum quis, fringilla at lectus. Vestibulum fringilla quam sed diam mattis, non congue arcu efficitur.
          </p>
        </a>
      </div>
      <div class="main_col">
        <a href="javascript:void(0);" class="expandable_box">
          <i class="fas fa-tooth fa-lg"></i>
          <h4>Lorem Ipsum</h4>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam fringilla dapibus est, et cursus justo. Aenean lobortis porta nunc, nec ultricies lectus molestie id. Nulla sollicitudin elementum consectetur. Pellentesque gravida nunc eget efficitur vestibulum.
            In lorem lacus, maximus eu bibendum quis, fringilla at lectus. Vestibulum fringilla quam sed diam mattis, non congue arcu efficitur.
          </p>
        </a>
      </div>
      <div class="main_col">
        <a href="javascript:void(0);" class="expandable_box">
          <i class="fas fa-tooth fa-lg"></i>
          <h4>Lorem Ipsum</h4>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam fringilla dapibus est, et cursus justo. Aenean lobortis porta nunc, nec ultricies lectus molestie id. Nulla sollicitudin elementum consectetur. Pellentesque gravida nunc eget efficitur vestibulum.
            In lorem lacus, maximus eu bibendum quis, fringilla at lectus. Vestibulum fringilla quam sed diam mattis, non congue arcu efficitur.
          </p>
        </a>
      </div>
      <div class="main_col">
        <a href="javascript:void(0);" class="expandable_box">
          <i class="fas fa-tooth fa-lg"></i>
          <h4>Lorem Ipsum</h4>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam fringilla dapibus est, et cursus justo. Aenean lobortis porta nunc, nec ultricies lectus molestie id. Nulla sollicitudin elementum consectetur. Pellentesque gravida nunc eget efficitur vestibulum.
            In lorem lacus, maximus eu bibendum quis, fringilla at lectus. Vestibulum fringilla quam sed diam mattis, non congue arcu efficitur.
          </p>
        </a>
      </div>
      <div class="main_col">
        <a href="javascript:void(0);" class="expandable_box">
          <i class="fas fa-tooth fa-lg"></i>
          <h4>Lorem Ipsum</h4>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam fringilla dapibus est, et cursus justo. Aenean lobortis porta nunc, nec ultricies lectus molestie id. Nulla sollicitudin elementum consectetur. Pellentesque gravida nunc eget efficitur vestibulum.
            In lorem lacus, maximus eu bibendum quis, fringilla at lectus. Vestibulum fringilla quam sed diam mattis, non congue arcu efficitur.
          </p>
        </a>
      </div>
      <div class="main_col">
        <a href="javascript:void(0);" class="expandable_box">
          <i class="fas fa-tooth fa-lg"></i>
          <h4>Lorem Ipsum</h4>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam fringilla dapibus est, et cursus justo. Aenean lobortis porta nunc, nec ultricies lectus molestie id. Nulla sollicitudin elementum consectetur. Pellentesque gravida nunc eget efficitur vestibulum.
            In lorem lacus, maximus eu bibendum quis, fringilla at lectus. Vestibulum fringilla quam sed diam mattis, non congue arcu efficitur.
          </p>
        </a>
      </div>
      <div class="main_col">
        <a href="javascript:void(0);" class="expandable_box">
          <i class="fas fa-tooth fa-lg"></i>
          <h4>Lorem Ipsum</h4>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam fringilla dapibus est, et cursus justo. Aenean lobortis porta nunc, nec ultricies lectus molestie id. Nulla sollicitudin elementum consectetur. Pellentesque gravida nunc eget efficitur vestibulum.
            In lorem lacus, maximus eu bibendum quis, fringilla at lectus. Vestibulum fringilla quam sed diam mattis, non congue arcu efficitur.
          </p>
        </a>
      </div>
    </div>
  </div>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://kit.fontawesome.com/a35ed2bddb.js" crossorigin="anonymous"></script>
</body>

</html>

Развернуть фрагмент

Я надеюсь, что это будет хорошо работать для вас.

Спасибо…