css 설치 각도만
배경.
Word Press 사이트를 만들고 있는데 갑자기 Togule(클릭한 후 펼친 것)을 실시하고 싶은데 JS를 준비해야 한다는 게 귀찮아서 CSS로만 실현하는 방법을 찾았어요.
다음에 같은 일을 하다가 잊어버릴 수도 있으니 메모로 그려보자.
코드
test.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
#toggle1{
display: none;
}
.toggle-inner{
display: none;
}
#toggle1:checked ~ .toggle-inner{
display: block;
}
</style>
</head>
<body>
<input type="checkbox" id="toggle1">
<div class="toggle-outer">
<label for="toggle1">クリックして開く▼</label>
</div>
<div class="toggle-inner">
<hr>
<p>長い文章長い文章長い文章長い文章長い文章長い文章長い文章長い文章長い文章長い文章長い文章長い文章長い文章長い文章長い文章長い文章長い文章長い文章長い文章長い文章長い文章長い文章長い文章</p>
</div>
</body>
</html>
설명
#toggle1:checked ~ .toggle-inner에서 "checkbox(검사 있음) 뒤에 있는 toggle-inner"응용 스타일만 지정할 수 있습니다(참조: E~F-CSS 3 참조http://www.htmq.com/selector/precede.shtml）동작 GIF
CodePen
Reference
이 문제에 관하여(css 설치 각도만), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://zenn.dev/katoaki/articles/fcef72b6e16709텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
