单击按钮后显示列表项行 - Show list item rows after button clicked

Show list item rows after button clicked

本文关键字：列表显示按钮单击 | 更新日期: 2023-09-27

嗨，我尝试开发自定义列表项。加载页面时，列表项中应该只显示<?php echo $row['title']; ?>。用户单击 <button id="show" class="btn btn-xs btn-info">Details</button>后，将显示描述和国家。我怎么能意识到呢?我没有这方面的经验。

示例(我用于这个blockquotes):

在按钮被点击之前，列表项显示如下:

我搜了一辆车

按钮被点击后，列表项显示如下:

我搜了一辆车

汽车应该是蓝色的，四个轮子
德国

    <ul class="list-group">
<?php foreach ($result as $key => $row): ?>             
                    
        
        <li class="list-group-item ">
            <h4 class="list-group-item-heading"><?php echo $row['title']; ?></h4>
            <p class="list-group-item-text"><?php echo $row['description']; ?></p>
            <p class="list-group-item-text"><?php echo $row['country']; ?></p>
            <span class="pull-right">
        <button id="show" class="btn btn-xs btn-info">Details</button>        
      </span>
        </li>
        
    
                                    
        <?php endforeach; ?>    
        </ul>

使用.list-group-item-text { display:none }隐藏.list-group-item-text
删除id="show"并使用一个类-我使用btn-info -这是强制性的，因为ID必须是唯一的
显示.show()或切换.toggle()

$(function() {
  $(".btn-info").on("click", function(e) {
    e.preventDefault(); // in some browsers a button submits if no type=
    $(this).closest(".list-group-item").children(".list-group-item-text").show();
  });
});

.list-group-item-text { display:none }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul>
  <li class="list-group-item ">
    <h4 class="list-group-item-heading">Title 1</h4>
    <p class="list-group-item-text">Description 1</p>
    <p class="list-group-item-text">Country 1</p>
    <span class="pull-right">
        <button class="btn btn-xs btn-info">Details</button>        
      </span>
  </li>
  <li class="list-group-item ">
    <h4 class="list-group-item-heading">Title 2</h4>
    <p class="list-group-item-text">Description 2</p>
    <p class="list-group-item-text">Country 2</p>
    <span class="pull-right">
        <button class="btn btn-xs btn-info">Details</button>        
      </span>
  </li>
  <li class="list-group-item ">
    <h4 class="list-group-item-heading">Title 3</h4>
    <p class="list-group-item-text">Description 3</p>
    <p class="list-group-item-text">Country 3</p>
    <span class="pull-right">
        <button class="btn btn-xs btn-info">Details</button>        
      </span>
  </li>
</ul>

在你的CSS中:

.list-group-item-text {
    display:none;
}

在你的Javascript中:

$('.show').click(function(){
    $(this).closest('li.list-group-item').find('.list-group-item-text').show(); //first fetch the parent of the button you pressed and then show the children with class .list-group-item-text
});

因为你要有多个。list- group -item块的副本，你需要将id="show"更改为class="show"