Helpex - Trao đổi & giúp đỡ Đăng nhập
41

Tôi đã tìm kiếm một thủ thuật hay để tạo nội dung Ẩn / Hiện hoặc một danh sách chỉ có CSS ​​và không có javascript. Tôi đã quản lý để thực hiện hành động này:

<!DOCTYPE html>
<head>

   <style>
      #cont {display: none; }
      .show:focus + .hide {display: inline; }
      .show:focus + .hide + #cont {display: block;}
   </style>

</head>
<body>

   <div>
        <a href="#show"class="show">[Show]</a>
        <a href="#hide"class="hide">/ [Hide]</a>
        <div id="cont">Content</div>
   </div>

</body>
</html>

Demo tại đây: http://jsfiddle.net/6W7XD/ Và nó hoạt động nhưng không như bình thường. Đây là vấn đề: Khi nội dung được hiển thị, bạn có thể ẩn nó bằng cách nhấp vào "bất kỳ đâu trên trang". Làm thế nào để vô hiệu hóa điều đó? làm thế nào để ẩn nội dung "chỉ" bằng cách nhấp vào ẩn? Cảm ơn bạn trước!

41 hữu ích 2 bình luận 217k xem chia sẻ
12 trả lời 12
39

Tôi sẽ không sử dụng hộp kiểm, tôi sẽ sử dụng mã bạn đã có

DEMO http://jsfiddle.net/6W7XD/1/

CSS

body {
  display: block;
}
.span3:focus ~ .alert {
  display: none;
}
.span2:focus ~ .alert {
  display: block;
}
.alert{display:none;}

HTML

<span class="span3">Hide Me</span>
<span class="span2">Show Me</span>
<p class="alert" >Some alarming information here</p>

Bằng cách này, văn bản chỉ bị ẩn khi nhấp vào phần tử ẩn

39 hữu ích 5 bình luận chia sẻ
22

Điều này sẽ làm bạn thất vọng: Các nút radio ẩn .

input#show, input#hide {
    display:none;
}

span#content {
    display:none;
}
input#show:checked ~ span#content {
  display:block;
}

input#hide:checked ~ span#content {
    display:none;
}
<label for="show">
    <span>[Show]</span>
</label>
<input type=radio id="show" name="group">
<label for="hide">
    <span>[Hide]</span> 
</label>    
<input type=radio id="hide" name="group">
<span id="content">Content</span>
Mở rộng đoạn mã

22 hữu ích 5 bình luận chia sẻ
17

Tôi đã sử dụng hộp kiểm ẩn để xem liên tục một số thư. Hộp kiểm có thể bị ẩn (hiển thị: không có) hoặc không. Đây là một đoạn mã nhỏ mà tôi có thể viết.

Bạn có thể xem và kiểm tra bản demo trên JSFiddle

HTML:

<input type=checkbox id="show">
<label for="show">Help?</label>
<span id="content">Do you need some help?</span>

CSS:

#show,#content{display:none;}
#show:checked~#content{display:block;}

Chạy đoạn mã:

#show,#content{display:none;}
#show:checked~#content{display:block;}
<input id="show" type=checkbox>
<label for="show">Click for Help</label>
<span  id="content">Do you need some help?</span>
Mở rộng đoạn mã

http://jsfiddle.net/9s8scbL7/

17 hữu ích 1 bình luận chia sẻ
12

Có 3 ví dụ nhanh với CSS thuần túy và không có javascript trong đó nội dung xuất hiện "khi nhấp", với "nhấp chuột được duy trì" và "hiển thị" thứ ba (tất cả chỉ được thử nghiệm trong Chrome). Xin lỗi vì đã đăng bài này nhưng câu hỏi này là kết quả seo đầu tiên và có lẽ đóng góp của tôi có thể giúp ích cho người mới bắt đầu như tôi

Tôi nghĩ (chưa được thử nghiệm) nhưng lợi thế của đối số "nội dung" là bạn có thể thêm biểu tượng tuyệt vời như từ Font Awesome (\ f-Code của nó) hoặc biểu tượng thập lục phân thay cho văn bản "Ẩn" và "Hiển thị" để quốc tế hóa lừa.

liên kết ví dụ http://jsfiddle.net/MonkeyTime/h3E9p/2/

<style>
label { position: absolute; top:0; left:0}

input#show, input#hide {
    display:none;
}

span#content {
    display: block;
    -webkit-transition: opacity 1s ease-out;
    transition: opacity 1s ease-out;
    opacity: 0; 
    height: 0;
    font-size: 0;
    overflow: hidden;
}

input#show:checked ~ .show:before {
    content: ""
}
input#show:checked ~ .hide:before {
    content: "Hide"
}

input#hide:checked ~ .hide:before {
    content: ""
}
input#hide:checked ~ .show:before {
    content: "Show"
}
input#show:checked ~ span#content {
    opacity: 1;
    font-size: 100%;
    height: auto;
}
input#hide:checked ~ span#content {
    display: block;
    -webkit-transition: opacity 1s ease-out;
    transition: opacity 1s ease-out;
    opacity: 0; 
    height: 0;
    font-size: 0;
    overflow: hidden;
}
</style>
<input type="radio" id="show" name="group">   
<input type="radio" id="hide" name="group" checked>
<label for="hide" class="hide"></label>
<label for="show" class="show"></label>
<span id="content">Lorem iupsum dolor si amet</span>


<style>
#show1 { position: absolute; top:20px; left:0}
#content1 {
    display: block;
    -webkit-transition: opacity 1s ease-out;
    transition: opacity 1s ease-out;
    opacity: 0; 
    height: 0;
    font-size: 0;
    overflow: hidden;
}
#show1:before {
    content: "Show"
}
#show1:active.show1:before {
    content: "Hide"
}
#show1:active ~ span#content1 {
    opacity: 1;
    font-size: 100%;
    height: auto;
}
</style>

<div id="show1" class="show1"></div>
<span id="content1">Ipsum Lorem</span>


<style>
#show2 { position: absolute; top:40px; left:0}
#content2 {
    display: block;
    -webkit-transition: opacity 1s ease-out;
    transition: opacity 1s ease-out;
    opacity: 0; 
    height: 0;
    font-size: 0;
    overflow: hidden;
}
#show2:before {
    content: "Show"
}
#show2:hover.show2:before {
    content: "Hide"
}
#show2:hover ~ span#content2 {
    opacity: 1;
    font-size: 100%;
    height: auto;
}

/* extra */
#content, #content1, #content2 {
    float: left;
    margin: 100px auto;
}
</style>

<div id="show2" class="show2"></div>
<span id="content2">Lorem Ipsum</span>
12 hữu ích 0 bình luận chia sẻ
8

Đây là những gì tôi đã sử dụng gần đây.

CSS

div#tabs p{display:none;}

div#tabs p.tab1:target {display:block;}
div#tabs p.tab2:target {display:block;}
div#tabs p.tab3:target {display:block;}

HTML

<div id='tabs'>
  <h2 class="nav-tab-wrapper">
    <a href="#tab1" class="nav-tab tab1">Pages</a>
    <a href="#tab2" class="nav-tab nav-tab-active tab2">Email</a>
    <a href="#tab3" class="nav-tab tab3">Support</a>
  </h2>

  <p id='tab1' class='tab1'>Awesome tab1 stuff</p>
  <p id='tab2' class='tab2'>Tab2 stuff</p>
  <p id='tab3' class='tab3'>Tab3 stuff</p>

</div>

https://jsfiddle.net/hoq0djwc/1/

Hy vọng nó sẽ giúp ở đâu đó.

8 hữu ích 0 bình luận chia sẻ
5

Đầu tiên, cảm ơn William.

Thứ hai - tôi cần một phiên bản động. Và nó hoạt động!

Một ví dụ:

CSS:

p[id^="detailView-"]
{
    display: none;
}

p[id^="detailView-"]:target
{
    display: block;
}

HTML:

<a href="#detailView-1">Show View1</a>
<p id="detailView-1">View1</p>

<a href="#detailView-2">Show View2</a>
<p id="detailView-2">View2</p>
5 hữu ích 0 bình luận chia sẻ
3

Câu trả lời bên dưới bao gồm việc thay đổi văn bản cho "show / hide" và sử dụng một hộp kiểm duy nhất, hai nhãn, tổng cộng bốn dòng html và năm dòng css. Nó cũng bắt đầu với nội dung ẩn.

Hãy thử nó trong JSFiddle

HTML

<input id="display-toggle" type=checkbox>
<label id="display-button" for="display-toggle"><span>Display Content</span></label>
<label id="hide-button" for="display-toggle"><span>Hide Content</span></label>    
<div id="hidden-content"><br />Hidden Content</div>

CSS

label {
  background-color: #ccc;
  color: brown;
  padding: 15px;
  text-decoration: none;
  font-size: 16px;
  border: 2px solid brown;
  border-radius: 5px;
  display: block;
  width: 200px;
  text-align: center;
}

input,
label#hide-button,
#hidden-content {
  display: none;
}

input#display-toggle:checked ~ label#display-button {
  display: none;
}

input#display-toggle:checked ~ label#hide-button {
  display: block;
  background-color: #aaa;
  color: #333
}

input#display-toggle:checked ~ #hidden-content {
  display: block;
} 
3 hữu ích 2 bình luận chia sẻ
2

Ngày nay (2020) bạn có thể làm điều này với HTML5 thuần túy và bạn không cần JavaScript hoặc CSS3.

<details>
<summary>Put your summary here</summary>
<p>Put your content here!</p>
</details>
2 hữu ích 2 bình luận chia sẻ
1

Tôi có một giải pháp đơn giản khác:

HTML:

<a href="#alert" class="span3" tabindex="0">Hide Me</a>
<a href="#" class="span2" tabindex="0">Show Me</a>
<p id="alert" class="alert" >Some alarming information here</p>

CSS:

body { display: block; }
p.alert:target { display: none; }

Nguồn: http://css-tricks.com/off-canvas-menu-with-css-target/

1 hữu ích 0 bình luận chia sẻ
1

Tôi biết đó là một bài đăng cũ nhưng giải pháp này thì sao ( tôi đã tạo một JSFiddle để minh họa nó ) ... Giải pháp sử dụng các :afterphần tử giả của <span>để hiển thị / ẩn <span>liên kết chuyển đổi (ngoài .alertthông báo nó phải hiển thị / ẩn giấu). Khi phần tử giả mất tiêu điểm, thông báo sẽ bị ẩn.

Tình huống ban đầu là một thông báo ẩn xuất hiện khi <span>có tiêu điểm :after content : "Show Me";. Khi cái này <span>được tập trung, nó :after contentsẽ trống trong khi :after contentcái thứ hai <span>(lúc đầu trống) chuyển sang "Hide Me" . Vì vậy, khi bạn nhấp vào thứ hai này, <span>người đầu tiên sẽ mất tiêu điểm và tình huống trở lại trạng thái ban đầu.

Tôi bắt đầu với giải pháp được cung cấp bởi @Vector. Tôi giữ nguyên trạng thái của DOM được trình bày ky @Frederic Kizar

HTML:

<span class="span3" tabindex="0"></span>
<span class="span2" tabindex="0"></span>
<p class="alert" >Some message to show here</p>

CSS:

body {
    display: inline-block;
}
.span3 ~ .span2:after{
    content:"";
}
.span3:focus ~ .alert  {
    display:block;
}
.span3:focus ~ .span2:after  {
    content:"Hide Me";
}
.span3:after  {
    content: "Show Me";
}
.span3:focus:after  {
    content: "";
}
.alert  {
    display:none;
}
1 hữu ích 5 bình luận chia sẻ
0

Một giải pháp rất dễ dàng từ cssportal.com

Nếu được nhấn [hiển thị], văn bản [hiển thị] sẽ bị ẩn và ngược lại.

Ví dụ này không hoạt động trong Chrome, tôi không hiểu tại sao ...

.show {
	display: none;
}
.hide:focus + .show {
	display: inline;
}
.hide:focus {
	display: none;
}
.hide:focus ~ #list { display:none; }
@media print {
.hide, .show {
	display: none;
}
}
<div><a class="hide" href="#">[hide]</a> <a class="show" href="#">[show]</a>
<ol id="list">
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ol>
</div>
Mở rộng đoạn mã

0 hữu ích 0 bình luận chia sẻ
0

Chỉ muốn minh họa, trong ngữ cảnh của các danh sách lồng nhau, tính hữu ích của <input>phương pháp hộp kiểm ẩn mà @jeffmcneill đề xuất - ngữ cảnh mà mỗi phần tử được hiển thị / ẩn phải giữ trạng thái của nó độc lập với tiêu điểm và trạng thái hiển thị / ẩn của các phần tử khác trên trang .

Việc cung cấp các giá trị với một tập hợp các ký tự bắt đầu phổ biến cho các idthuộc tính của tất cả các hộp kiểm được sử dụng cho các phần tử được hiển thị / ẩn trên trang cho phép bạn sử dụng [id^=""]lược đồ công cụ chọn tiết kiệm cho các quy tắc biểu định kiểu để chuyển đổi giao diện của phần tử có thể nhấp của bạn và phần tử được hiển thị / ẩn có liên quan displaytrạng thái qua lại. Ở đây, của tôi idlà 'mở rộng-1,' 'mở rộng-2,' 'mở rộng-3.'

Lưu ý rằng tôi cũng đã sử dụng :afterý tưởng bộ chọn của @ Diepen để giữ cho <label>phần tử không có nội dung trong html.

Cũng lưu ý rằng <input> <label> <div class="collapsible">trình tự quan trọng và CSS tương ứng với +bộ chọn thay vì ~.

jsfiddle đây

.collapse-below {
    display: inline;
}

p.collapse-below::after {
    content: '\000A0\000A0';
}

p.collapse-below ~ label {
    display: inline;
}

p.collapse-below ~ label:hover {
    color: #ccc;
}

input.collapse-below,
ul.collapsible {
    display: none;
}

input[id^="expanded"]:checked + label::after {
    content: '\025BE';
}

input[id^="expanded"]:not(:checked) + label::after {
    content: '\025B8';
}

input[id^="expanded"]:checked + label + ul.collapsible {
    display: block;
}

input[id^="expanded"]:not(:checked) + label + ul.collapsible {
    display: none;
}
<ul>
  <li>single item a</li>
  <li>single item b</li>
  <li>
    <p class="collapse-below" title="this expands">multiple item a</p>
    <input type="checkbox" id="expanded-1" class="collapse-below" name="toggle">
    <label for="expanded-1" title="click to expand"></label>
    <ul class="collapsible">
      <li>sub item a.1</li>
      <li>sub item a.2</li>
    </ul>
  </li>
  <li>single item c</li>
  <li>
    <p class="collapse-below" title="this expands">multiple item b</p>
    <input type="checkbox" id="expanded-2" class="collapse-below" name="toggle">
    <label for="expanded-2" title="click to expand"></label>
    <ul class="collapsible">
      <li>sub item b.1</li>
      <li>sub item b.2</li>
    </ul>
  </li>
  <li>single item d</li>
  <li>single item e</li>
  <li>
    <p class="collapse-below" title="this expands">multiple item c</p>
    <input type="checkbox" id="expanded-3" class="collapse-below" name="toggle">
    <label for="expanded-3" title="click to expand"></label>
    <ul class="collapsible">
      <li>sub item c.1</li>
      <li>sub item c.2</li>
    </ul>
  </li>
</ul>
Mở rộng đoạn mã

0 hữu ích 0 bình luận chia sẻ
loading
Không tìm thấy câu trả lời bạn tìm kiếm? Duyệt qua các câu hỏi được gắn thẻ list css hide show , hoặc hỏi câu hỏi của bạn.

Có thể bạn quan tâm

loading