用css展開和摺疊

我在Jquery中創建了一個函數來展開和摺疊div的內容。但現在我想只能用CSS來使它也使用箭頭的圖像，像這樣的人用css展開和摺疊

enter image description here

觀看現場jsFiddle

我也想消除所有這些標籤跨度和保持唯一的div和它的內容

這裏我到目前爲止的代碼。

<div class='showHide'> 
    <span class='expand'><span id="changeArrow">&#8593;</span>Line expand and collapse</span> 
    <fieldset id="fdstLorem">Lorem ipsum...</fieldset> 
</div>

$(document).ready(function() { 
    $('.showHide>span').click(function() { 
     $(this).next().slideToggle("slow"); 
     return false; 
    }); 
    $(".showHide>span").toggle(function() { 
     $(this).children("#changeArrow").text("↓"); 
    }, function() { 
     $(this).children("#changeArrow").text("↑"); 
    }); 
});

來源

2014-09-30 gbvisconti

你不能這樣做只有在CSS。 – deKajoo 2014-09-30 12:42:12

我以爲我可以。那麼我怎麼能至少用這些箭頭去除不必要的html？ – gbvisconti 2014-09-30 12:43:22

看看這個純粹的CSS解決方案：http://stackoverflow.com/questions/9100344/pure-css-multi-level-drop-down-menu – dippas 2014-09-30 12:47:13

.fieldsetContainer { 
 
    height: 0; 
 
    overflow: hidden; 
 
    transition: height 400ms linear; 
 
} 
 

 
#toggle { 
 
    display: none; 
 
} 
 

 
#toggle:checked ~ .fieldsetContainer { 
 
    height: 50px; 
 
} 
 

 
label .arrow-dn { display: inline-block; } 
 
label .arrow-up { display: none; } 
 

 
#toggle:checked ~ label .arrow-dn { display: none; } 
 
#toggle:checked ~ label .arrow-up { display: inline-block; }

<div class='showHide'> 
 
    <input type="checkbox" id="toggle" /> 
 
    
 
    <label for="toggle"> 
 
     <span class='expand'> 
 
      <span class="changeArrow arrow-up">↑</span> 
 
      <span class="changeArrow arrow-dn">↓</span> 
 
      Line expand and collapse 
 
     </span> 
 
    </label> 
 
    
 
    <div class="fieldsetContainer"> 
 
     <fieldset id="fdstLorem"> 
 
      Lorem ipsum... 
 
     </fieldset> 
 
    </div> 
 
</div>

來源

2014-09-30 12:53:29 dashtinejad

是否有一些簡潔的方法可以讓每個頁面爲多個可摺疊區域做這項工作？ – ehdr 2017-07-30 09:37:32

這是我做的方式，相較於複選框做的東西很簡潔乾淨，而只是擴展了懸停或點擊&保持（其對觸摸有好處）...

<style> 

.collapse-able { 
    height: 1.2rem; 
    overflow: hidden; 
} 

.collapse-able:active, .collapse-able:hover { 
    height: auto; 
} 

</style>

與

<div class="collapse-able"> 
    <h1> The first line will always show </h1> 
    </br> 
    But what's underneath won't until hover or click and drag. Which is neat. 
</div>

來源

2015-04-17 19:53:21 liljoshu

用css展開和摺疊

回答

相關問題