類別的CSS摺疊列表

當僅使用CSS單擊「類別」時，是否可以使以下html切換摺疊/不折疊？類別的CSS摺疊列表

我無法更改Html，但我可以添加CSS。

<div class="prdctfltr_filter prdctfltr_meta prdctfltr_text prdctfltr_single" data-filter="mta_vendor_2_10" data-limit="0"> 
    <input name="mta_vendor_2_10" type="hidden"> 
    <span class="prdctfltr_regular_title">Categories<i class="prdctfltr-down"></i></span> 

    <div class="prdctfltr_add_scroll" style="max-height:;"> 
     <div class="prdctfltr_checkboxes"> 
      <label class="prdctfltr_ft_none"><input type="checkbox" value=""><span>none</span></label> 
      <label class="prdctfltr_ft_cat1"><span><input type="checkbox" value="cat1"><span>Category 1</span></span></label> 
      <label class="prdctfltr_ft_cat2"><span><input type="checkbox" value="cat2"><span>Category 2</span></span></label> 
      <label class="prdctfltr_ft_cat3"><span><input type="checkbox" value="cat3"><span>Category 3</span></span></label> 
     </div> 
    </div> 
</div>

來源

2017-03-08 Hamid

包括你的CSS也，更好的做出的jsfiddle –

使用CSS動畫 –

沒有，

有純CSS沒有 'click' 事件（因爲你不能改變你的HTML）。你可以用懸停來實現，但這顯然只能在懸停時起作用。

如果您可以添加一些JavaScript，您可以點擊添加一個類並將該類用於CSS樣式。

來源

2017-03-08 08:15:31

是 :-)

隨着:focus僞類。

<div class="target" tabindex="0">Click me</div> 
<div class="menu">I am menu</div> 

.target + .menu { 
    display: block 
} 

.target:focus + .menu { 
    display: block; 
}

演示：

.target + .menu { 
 
     display: none; 
 
    } 
 
    
 
    .target:focus + .menu { 
 
     display: block; 
 
    }

<div class="target" tabindex="0">Click me</div> 
 
    <div class="menu">I <br>am<br> menu</div>

來源

2017-03-08 08:17:30 user31782

我試過一個例子： .prdctfltr_regular_title + .prdctfltr_add_scroll { 顯示：沒有; } .prdctfltr_regular_title：focus + .prdctfltr_add_scroll { display：block; } 但沒有奏效。 – Hamid

謝謝，相當有創意的方式！，仍然不是'咔嗒'效果，但非常接近。 –

「請注意，他***無法更改HTML ***。因此，您的選擇無效...」 - [TVA van Hesteren]（http://stackoverflow.com/users/7114793/tva-van -hesteren） –

類別的CSS摺疊列表

回答

相關問題