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>

Answer 2

＆＃13;

$(function() {
  //hide all the text items
  $('.list-group-item-text').hide();
  //add a click handler to the href by class
  $('.list-group-item').click(function() {
    //get the child element
    var text = $(this).find('.list-group-item-text');
    //get its state
    var state = text.is(":visible");
    //hide all the other items
    $('.list-group-item-text').hide();
    if (state == false) //show if it was hidden
      text.show();
  });
});

＆＃13;

JSFiddle

Answer 3

您可以使用jQuery切换，fiddle：

它将在选择器上切换隐藏和显示。检查下面的代码段。并隐藏如果单击外部添加文档上的单击事件但检查条件 if(!$(e.target).hasClass('list-group-item-heading')。请参阅第二个代码段。

$("p.list-group-item-text").hide();
$(".list-group-item-heading").on("click",function(){
    $(this).next("p.list-group-item-text").toggle('slow');
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>

更新Fiddle，在外面点击时关闭

$("p.list-group-item-text").hide();
$(".list-group-item-heading").on("click",function(){
    $(this).next("p.list-group-item-text").toggle('slow');
$(this).parents('.list-group-item').siblings().find("p.list-group-item-text").hide('slow');
})
$(document).on('click',function(e){
     if(!$(e.target).hasClass('list-group-item-heading') )
   {
       $("p.list-group-item-text").hide('slow');               
   }
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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 4

你可以使用Andrew Van Till的回答。如果您希望再次单击时文本也隐藏，您可以将其jQuery代码更新为此;

$(function() {
  $('.list-group-item-text').hide();
    $('.list-group-item').click(function(){
        if ($(this).find('.list-group-item-text').is(':visible')) {
            
            $(this).find('.list-group-item-text').hide();
        } else {
            
            $(this).find('.list-group-item-text').show();
        }        
    });  
});

Answer 5

如果您有大量重复内容，我建议您使用像Handlebars这样的模板库。使用您想要的内容（可能从Ajax查询返回）构建一个Javascript数组，然后使用该模板填写列表。

对于列表组项，从空列表组div开始，并注册一个click（）处理程序（例如使用jQuery），该处理程序调用使用您模板的函数。

这是jsfiddle example。 javascript：

$(function() {
    $(".list-group").click(function() {
        var source   = $("#item-template").html();
        var template = Handlebars.compile(source);

        var data = [
            {heading:"List group item heading 1",text:"Lorem ipsum 1"},
            {heading:"List group item heading 2",text:"Lorem ipsum 2"}
        ];

        for( var i=0; i<data.length; i++ ) {
            $(".list-group").append(template(data[i]));
        }
    });
});

HTML：

<div class="list-group">
Click to expand
</div>

<script id="item-template" type="text/x-handlebars-template">
    <a href="#" class="list-group-item">
            <h4 class="list-group-item-heading">{{heading}}<b class="caret"></b></h4>
    <p class="list-group-item-text">{{text}}</a>
</script>

隐藏内容，直到单击其父级

5 个答案: