php - 单击按钮后显示列表项行

Question

您好，我尝试开发自定义列表项。仅<?php echo $row['title']; ?>页面加载时应显示在列表项中。用户点击 <button id="show" class="btn btn-xs btn-info">Details</button>后应显示说明和国家/地区。我怎样才能意识到这一点？我没有任何类似的经验。

示例(我用于此 block 引用):

在按钮单击列表项之前显示:

I search a car

单击按钮后，列表项显示:

I search a car

The car should have a blue color and four wheels

Germany

    <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>

Answer 1

1. 使用 .list-group-item-text { display:none } 在 CSS 中隐藏 .list-group-item-text
2. 删除 id="show" 并使用一个类 - 我使用 btn-info - 这是强制性的，因为 ID 必须是唯一的
3. 使用 .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>