Как сделать так, чтобы 2 элемента щелчка для развертывания находились в одной строке при развертывании только первого элемента?

ProgramBox

Как сделать так, чтобы 2 элемента щелчка для развертывания находились в одной строке при развертывании только первого элемента?

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

#html #css

#HTML #css

Вопрос:

Я использую следующий CSS для компактного отображения двух элементов.

 .trigger,

/* to hide the checkbox and for more general use */

.gone,
.hidden {
  display: none;
  position: absolute;
  overflow: hidden;
  clip: rect(0 0 0 0);
  z-index: -999999;
  top: -999999px;
  margin: -1px;
  padding: 0;
  border: 0;
  height: 1px;
  width: 1px;
  min-height: 0;
  min-width: 0
}

label {
  cursor: pointer
}

.fullverbtable {
  display: none
}

.trigger:checked~.fullverbtable {
  display: block
}

label {
  font-family: 'Fira Sans', sans-serif;
  font-size: 15px;
  font-weight: normal;
  font-style: normal;
  color: white;
  background-color: #ff4b54;
  border-radius: 5px;
  padding: 0px 5px;
  text-decoration: none;
}

.verb {
  display: inline;
}

 <div class="verb">
  <label for="aimer_larousse_ef_active_10">Conjugaison (voix active)</label>
  <input class="trigger" id="aimer_larousse_ef_active_10" type="checkbox">
  <div class="fullverbtable">
    <link href="larousse_ef.css" rel="stylesheet" type="text/css">abcaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>
</div>

<div class="verb">
  <label for="aimer_larousse_ef_passive10">Conjugaison (voix passive)</label>
  <input class="trigger" id="aimer_larousse_ef_passive10" type="checkbox">
  <div class="fullverbtable">
    <link href="larousse_ef.css" rel="stylesheet" type="text/css">xyzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzz</div>
</div>

При развертывании обоих двух элементов отображение получается очень четким.

Я надеюсь, что результат при расширении только первого элемента в виде

Не могли бы вы, пожалуйста, объяснить, как это сделать?

1. И если вы нажмете только на passive , что произойдет? куда следует xyz перейти?

2. @Baro При развертывании элемента этот элемент будет отображаться как обычный абзац, начиная с крайнего левого. В моем случае он находится в той же позиции, что и abc .

3. @Baro В любом случае, большое вам спасибо за проявленный интерес к моему вопросу 🙂

4. если ответа недостаточно, вам нужно запустить некоторые классы с помощью javascript

Ответ №1:

Я думал, что понял ваш вопрос, если я прав, вы хотите создать что-то вроде accordion, используя checkboxes но checkboxes все может быть проверено и даже имя общего ресурса y, которое я использовал radio для этого, и я не хочу обращаться к вам с недопустимым HTML, поэтому вы обнаружите, что я слишком много редактирую, но это просто, вы найдете то, что хотите

 .trigger {
  display: none;
}

label {
  cursor: pointer
}

.fullverbtable_1,
.fullverbtable_2 {
  display: none;
}

input[id="aimer_larousse_ef_active_10"]:checked~.fullverbtable_1,
input[id="aimer_larousse_ef_passive_10"]:checked~.fullverbtable_2 {
  display: flex;
}

label {
  font-family: 'Fira Sans', sans-serif;
  font-size: 15px;
  color: white;
  background-color: #ff4b54;
  border-radius: 5px;
  padding: 0px 5px;
}

 <div class="inputs">
  <label for="aimer_larousse_ef_active_10">Conjugaison (voix active)</label>
  <input type="radio" id="aimer_larousse_ef_active_10" name="trigger" class="trigger">
  <label for="aimer_larousse_ef_passive_10">Conjugaison (voix passive)</label>
  <input type="radio" id="aimer_larousse_ef_passive_10" name="trigger" class="trigger">

  <div class="fullverbtable_1">abcaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>
  <div class="fullverbtable_2">xyzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzz</div>
</div>
<div class="para">

</div>

Если вы хотите развернуть их все одновременно, вы можете просто заменить radio type на checkbox

 .trigger {
  display: none;
}

label {
  cursor: pointer
}

.fullverbtable_1,
.fullverbtable_2 {
  display: none;
}

input[id="aimer_larousse_ef_active_10"]:checked~.fullverbtable_1,
input[id="aimer_larousse_ef_passive_10"]:checked~.fullverbtable_2 {
  display: flex;
}

label {
  font-family: 'Fira Sans', sans-serif;
  font-size: 15px;
  color: white;
  background-color: #ff4b54;
  border-radius: 5px;
  padding: 0px 5px;
}

 <div class="inputs">
  <label for="aimer_larousse_ef_active_10">Conjugaison (voix active)</label>
  <input type="checkbox" id="aimer_larousse_ef_active_10" name="trigger" class="trigger">
  <label for="aimer_larousse_ef_passive_10">Conjugaison (voix passive)</label>
  <input type="checkbox" id="aimer_larousse_ef_passive_10" name="trigger" class="trigger">

  <div class="fullverbtable_1">abcaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>
  <div class="fullverbtable_2">xyzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzz</div>
</div>
<div class="para">

</div>