类别的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折叠列表

回答

相关问题