Question

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

示例（我用于此块引用）：

按钮点击列表项之前显示：

我搜索汽车

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

我搜索汽车

汽车应该有蓝色和四个轮子

德国

    <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

使用.list-group-item-text

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

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

Answer 2

在你的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-grou-item块的多个副本，因此您需要将id="show"更改为class="show"

单击按钮后显示列表项行

2 个答案: