javascript - 隐藏内容直到其父级被点击

Question

如何在下面的 HTML 中隐藏每个 p.list-group-item-text，直到它的父级 a.list-group-item 被点击，然后单击其他内容时再次隐藏？

解决方案必须与移动设备兼容。

<div class="list-group">
  <a href="#" class="list-group-item">
    <h4 class="list-group-item-heading">List group item heading <b class="caret"></b></h4>
    <p class="list-group-item-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas interdum nisl ac elit commodo fringilla. Suspendisse varius nunc mauris, vitae egestas nunc cursus vitae. Ut congue odio libero, sit amet sodales arcu convallis ac. Nunc quis blandit
      metus. Aliquam hendrerit lectus vitae sapien placerat volutpat. Aenean nibh felis, volutpat sit amet maximus eget, consequat at orci. Integer pellentesque molestie elit. Donec placerat semper lacus vel blandit. Donec et dictum felis. Interdum et
      malesuada fames ac ante ipsum primis in faucibus. Phasellus consectetur diam a sagittis vestibulum. Fusce vestibulum sollicitudin venenatis.</p>
  </a>
  <a href="#" class="list-group-item">
    <h4 class="list-group-item-heading">List group item heading <b class="caret"></b></h4>
    <p class="list-group-item-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas interdum nisl ac elit commodo fringilla. Suspendisse varius nunc mauris, vitae egestas nunc cursus vitae. Ut congue odio libero, sit amet sodales arcu convallis ac. Nunc quis blandit
      metus. Aliquam hendrerit lectus vitae sapien placerat volutpat. Aenean nibh felis, volutpat sit amet maximus eget, consequat at orci. Integer pellentesque molestie elit. Donec placerat semper lacus vel blandit. Donec et dictum felis. Interdum et
      malesuada fames ac ante ipsum primis in faucibus. Phasellus consectetur diam a sagittis vestibulum. Fusce vestibulum sollicitudin venenatis.</p>
  </a>
</div>

Answer 1

您可以使用 CSS :focus 伪类选择器来做到这一点。只需在要隐藏的元素上设置 display: none，然后在父元素具有焦点时在同一元素上设置 display: block。

p.list-group-item-text {
    display: none;
}
a.list-group-item:focus p.list-group-item-text {
    display: block;
}

<div class="list-group">
  <a href="#" class="list-group-item">
    <h4 class="list-group-item-heading">List group item heading <b class="caret"></b></h4>
    <p class="list-group-item-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas interdum nisl ac elit commodo fringilla. Suspendisse varius nunc mauris, vitae egestas nunc cursus vitae. Ut congue odio libero, sit amet sodales arcu convallis ac. Nunc quis blandit
      metus. Aliquam hendrerit lectus vitae sapien placerat volutpat. Aenean nibh felis, volutpat sit amet maximus eget, consequat at orci. Integer pellentesque molestie elit. Donec placerat semper lacus vel blandit. Donec et dictum felis. Interdum et
      malesuada fames ac ante ipsum primis in faucibus. Phasellus consectetur diam a sagittis vestibulum. Fusce vestibulum sollicitudin venenatis.</p>
  </a>
  <a href="#" class="list-group-item">
    <h4 class="list-group-item-heading">List group item heading <b class="caret"></b></h4>
    <p class="list-group-item-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas interdum nisl ac elit commodo fringilla. Suspendisse varius nunc mauris, vitae egestas nunc cursus vitae. Ut congue odio libero, sit amet sodales arcu convallis ac. Nunc quis blandit
      metus. Aliquam hendrerit lectus vitae sapien placerat volutpat. Aenean nibh felis, volutpat sit amet maximus eget, consequat at orci. Integer pellentesque molestie elit. Donec placerat semper lacus vel blandit. Donec et dictum felis. Interdum et
      malesuada fames ac ante ipsum primis in faucibus. Phasellus consectetur diam a sagittis vestibulum. Fusce vestibulum sollicitudin venenatis.</p>
  </a>
</div>