Как сохранить разборные панели чистого HTML и CSS открытыми при открытии другой?

ProgramBox

Как сохранить разборные панели чистого HTML и CSS открытыми при открытии другой?

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

#html #css

#HTML #css

Вопрос:

У меня есть следующие разборные панели, написанные на чистом HTML и CSS:

            <style>
                .collapse-panel {
                    display: block;
                    vertical-align: top;
                    height: auto !important;
                }

                .collapse-panel a {
                    font-family: "Lucida Console", Monaco, monospace;
                    font-size: 16pt;
                    font-weight: bolder;
                    text-decoration: none;
                }

                .collapse-panel-content {
                    display: none;
                    height: auto;
                }

                .show {
                    display: none;
                }

                .hide:target   .show {
                    display: inline;
                }

                .hide:target {
                    display: none;
                }

                .hide:target ~ .collapse-panel-content {
                    display: inline;
                }
            </style>
        <div>
            <div>
                <div class="collapse-panel">
                    <a href="#hide1" class="hide" id="hide1"> </a>
                    <a href="#show1" class="show" id="show1">-</a>
                    <span>Details A</span>
                    <div class="collapse-panel-content">
                        <div>Some details</div>
                    </div>
                </div>
            </div>
        </div>

        <div>
            <div>
                <div class="collapse-panel">
                    <a href="#hide2" class="hide" id="hide2"> </a>
                    <a href="#show2" class="show" id="show2">-</a>
                    <span>Details B</span>
                    <div class="collapse-panel-content">
                        <div>Some other details</div>
                    </div>
                </div>
            </div>
        </div>

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

Ответ №1:

Я не думаю, что вы можете, используя :target .

От w3schools:

Селектор :target можно использовать для оформления текущего активного целевого элемента.

И это именно то, что вы делаете. Теперь, можете ли вы придумать способ иметь более одного :active элемента одновременно? Потому что я не знаю ни одной.

Но это не значит, что вы не можете достичь этого с помощью одного CSS. Вам просто нужно проявить творческий подход. Используйте элементы, которые способны сохранять текущее состояние элемента, предоставляя его селекторам CSS. Например, флажки:

 [id^="collapseCheck-"]{
  display: none;
}
label[for^="collapseCheck-"] {
  display: block;
}
label[for^="collapseCheck-"]:before {
  content: " ";
  width: 1rem;
  text-align: center;
  display: inline-block;
}

[id^="collapsePanel-"] {
  display: none;
  padding: 1rem;
}

#collapseCheck-1:checked ~ label[for="collapseCheck-1"]:before {content: "-"}
#collapseCheck-2:checked ~ label[for="collapseCheck-2"]:before {content: "-"}
#collapseCheck-3:checked ~ label[for="collapseCheck-3"]:before {content: "-"}
/*...*/

#collapseCheck-1:checked ~ #collapsePanel-1 {display: block;}
#collapseCheck-2:checked ~ #collapsePanel-2 {display: block;}
#collapseCheck-3:checked ~ #collapsePanel-3 {display: block;}
/*...*/

 <input type="checkbox" id="collapseCheck-1">
<input type="checkbox" id="collapseCheck-2">
<input type="checkbox" id="collapseCheck-3">
<!-- ... -->


<label for="collapseCheck-1">Details A</label>
  <div id="collapsePanel-1">
    <div>Some details</div>
  </div>

<label for="collapseCheck-2">Details B</label>
  <div id="collapsePanel-2">
    <div>Some details</div>
  </div>

<label for="collapseCheck-3">Details C</label>
  <div id="collapsePanel-3">
    <div>Some details</div>
  </div>

<!-- ... -->

Вы можете сгенерировать необходимый список селекторов CSS, используя foreach на стороне сервера, если ваши элементы динамические. Ограничение здесь заключается в том, что все ваши контрольные флажки должны быть размещены на том же уровне, что и список элементов (или вам нужно настроить селектор, конечно), и они должны быть размещены перед вашими элементами (CSS смотрит только вперед, никогда сзади).

Это решение можно легко переключить на «закрыть все остальные контейнеры», переключив type элементы управления <input> на radio элементы, совместно использующие один и тот же name атрибут.

Пожалуйста, обратите внимание, что это доказательство концепции. Для того, чтобы сделать его пригодным для использования в среде производственного уровня, следует также добавить к нему атрибуты aria, чтобы он стал доступным и мог использоваться всеми устройствами, а не только типами экранов.

Ответ №2:

Это очень просто сделать с помощью тегов details и summary . Но прежде чем вы пойдете дальше, вы должны знать, что в настоящее время браузеры IE, Edge, Opera не поддерживают эти элементы ( Mozzila с версии 49 ). Проверьте эту ссылку : http://caniuse.com/#feat=details

<details> Тег можно использовать для создания интерактивного виджета, который пользователь может открывать и закрывать. Внутри тега может быть помещен любой контент.

<summary> Тег определяет видимый заголовок для элемента. Заголовок можно щелкнуть, чтобы просмотреть / скрыть детали.

Теперь ваш код:

 summary::-webkit-details-marker {
  display: none
}

summary:after {	  
  float: left; 	
  width: 20px;
  content: " ";
}

details[open] summary:after {
  content: "-";
}

 <article>
  <details>
    <summary>details A</summary>        		      			
    <span>Some content</span> 		        
  </details>
</article>

<article>
  <details>
    <summary>details B</summary>       			
    <span>Some other content</span>
  </details>
</article>

1. Хорошее и понятное решение. Молодец! Однако, пожалуйста, обратите внимание, что в настоящее время это не работает в IE, Edge или Opera Mini. Могу ли я использовать <подробности>?

2. Да, конечно, это то, что им нужно знать! Спасибо за примечание: D

Ответ №3:

Вы можете сделать это с помощью input type=»флажок», если он установлен. Это будет работать во всех браузерах.

 .collapse-panel{
			border: 1px solid #ccc;
			list-style-type: none;
			padding-left: 0px;
			font-family: "Arial";
		}
		.collapse-panel li{
			position: relative;
			margin-bottom: 1px;
		}
		.collapse-panel li:last-child{margin-bottom: 0px;}
		.collapse-panel li label{
			padding: 7px 7px 7px 32px;
			background: #eee;
			display: block;
		}
		.collapse-panel li label:hover{
			background: #ddd;
		}
		.collapse-panel li input{
			position: absolute;
			top: 0px;
			visibility: hidden;
		}
		.collapse-panel li span{
			position: absolute;
			width: 15px;
			height: 15px;
			border:1px solid #999;
			border-radius: 50%;
			z-index: 2;
			top: 9px;
			left: 7px;
		}
		.collapse-panel li span:before{
			content: ' ';
			position: absolute;
			top: -1px;
			left: 3px;
			line-height: 15px;
			font-size: 15px;
			color: green;
			font-weight: bold;
		}
		.collapse-panel li p{
			padding: 7px;
			font-size: 14px;
			color: #555;
			margin: 0px;
			display: none;
		}
		.collapse-panel li input:checked ~ p{
			display: block;
		}
		.collapse-panel li input:checked ~ span:before{
			content: '-';
			position: absolute;
			top: -2px;
			left: 5px;
			color: red;
		}

 <ul class="collapse-panel">
	<li>
		<label for="col1">Details A</label>
		<input type="checkbox" name="" id="col1"><span></span>
		<p>
			Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
			tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
			quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
			consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
			cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
			proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
		</p>
	</li>
	<li>
		<label for="col2">Details B</label>
		<input type="checkbox" name="" id="col2"><span></span>
		<p>
			Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
			tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
			quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
			consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
			cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
			proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
		</p>
	</li>
	<li>
		<label for="col3">Details C</label>
		<input type="checkbox" name="" id="col3"><span></span>
		<p>
			Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
			tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
			quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
			consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
			cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
			proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
		</p>
	</li>
	<li>
		<label for="col4">Details D</label>
		<input type="checkbox" name="" id="col4"><span></span>
		<p>
			Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
			tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
			quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
			consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
			cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
			proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
		</p>
	</li>
</ul>

Вопрос:

Ответ №1:

Ответ №2:

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

Ответ №3:

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

Как уточнить это регулярное выражение, которое пропускает одно из двух слов?

Перебор списка (Python)

Невозможно развернуть веб-сокеты Laravel в AWS Elastic Beanstalk