it-swarm.dev

إخفاء إظهار قائمة المحتوى باستخدام CSS فقط ، لا يتم استخدام جافا سكريبت

لقد كنت أبحث عن خدعة جيدة لإنشاء محتوى إخفاء/إظهار أو قائمة تحتوي فقط على CSS ولا تحتوي على جافا سكريبت. لقد تمكنت من اتخاذ هذا الإجراء:

<!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>

العرض التوضيحي هنا: http://jsfiddle.net/6W7XD/ وهو يعمل ولكن ليس كما ينبغي. هذه هي المشكلة: عند عرض المحتوى ، يمكنك إخفائه بالنقر فوق "أي مكان في الصفحة". كيفية تعطيل ذلك؟ كيفية إخفاء المحتوى "فقط" عن طريق النقر فوق إخفاء؟ شكرا لكم مقدما!

30
Frederic Kizar

لن أستخدم مربعات الاختيار ، كنت أستخدم الكود الذي لديك بالفعل

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>

بهذه الطريقة يتم إخفاء النص فقط عند النقر فوق عنصر إخفاء

31
Kevin Lynch

هذا سوف ينفجر عقلك: أزرار الراديو المخفية .

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>
17
Pat Lillis

هناك 3 أمثلة سريعة مع CSS خالٍ وبدون javascript حيث يظهر المحتوى "عند النقر" ، مع "نقرة متواصلة" و "onhover" ثالثة (جميعها تم اختبارها فقط في Chrome). نأسف على نشر هذا المنشور ، لكن هذا السؤال هو أول نتيجة لكبار المسئولين الاقتصاديين وربما يمكن أن تساعد مساهمي المبتدئين مثلي

أعتقد (لم يتم اختباره) ، ولكن ميزة "المحتوى" في الوسيطة هي أنه يمكنك إضافة رمز رائع مثل من Font Awesome (رمزها\f-code) أو رمز ست عشري بدلاً من النص "إخفاء" و "عرض" لتدويل الحيلة.

مثال الرابط 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>
9
MonkeyTime

هذا هو ما استخدمته مؤخرا.

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/

آمل أن يساعد في مكان ما.

6
William

أولاً ، بفضل وليام.

ثانياً - كنت بحاجة إلى إصدار ديناميكي. ويعمل!

مثال:

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
lsblsb

لقد استخدمت خانة اختيار مخفية لعرض دائم لبعض الرسائل. يمكن إخفاء مربع الاختيار (العرض: لا شيء) أم لا. هذا هو رمز صغير أستطيع أن أكتب.

يمكنك رؤية واختبار العرض التوضيحي على 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;}

تشغيل مقتطف الشفرة:

#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>

http://jsfiddle.net/9s8scbL7/

5
lynx_74

أعلم أنه منشور قديم ، لكن ماذا عن هذا الحل ( لقد قمت بإنشاء JSFiddle لتوضيحه) ) ... الحل الذي يستخدم العناصر الزائفة :after لـ <span> لإظهار/إخفاء رابط التبديل <span> نفسه (بالإضافة إلى الرسالة .alert يجب إظهار/إخفاء). عندما يفقد العنصر الزائف تركيزه ، تكون الرسالة مخفية.

الموقف الأولي هو رسالة مخفية تظهر عند تركيز <span> مع :after content : "Show Me";. عندما يركز هذا <span> ، يصبح :after content فارغًا بينما يتحول :after content الثاني <span> (الذي كان فارغًا في البداية) إلى "إخفاءني" . لذلك ، عند النقر فوق هذا الثاني <span> أول واحد يفقد تركيزه ويعود الموقف إلى حالته الأولية.

لقد بدأت في الحل الذي قدمتهVector ظللت أن DOM'situation قدمت kyFrederic 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
Diepen

لدي حل بسيط آخر:

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; }

المصدر: http://css-tricks.com/off-canvas-menu-with-css-target/

1
Miguel Garrido

حل سهل للغاية من cssportal.com

إذا تم الضغط على [show] ، فسيتم إخفاء النص [show] والعكس.

هذا المثال لا يعمل في Chrome ، لا أفهم ...

.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>
1
user2422690

تشتمل الإجابة أدناه على تغيير النص الخاص بـ "إظهار/إخفاء" ، ويستخدم مربع اختيار واحد وتسمية اثنين وما مجموعه أربعة أسطر من html وخمسة أسطر من css. كما أنه يبدأ مع المحتوى المخفي.

جربه في JSFiddle

[~ # ~] أتش تي أم أل [~ # ~]

<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>

[~ # ~] المغلق [~ # ~]

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;
} 
1
jeffmcneill