Question

我遇到了一个问题，我需要为用户显示订单历史记录，功能如下。

订单历史记录 - 每个订单摘要 - （点击详细信息） - 详细信息可见。我面临的问题是什么时候将类放在JavaScript上我看到所有详细信息选项卡都会在一次单击时显示，因为我需要它是唯一的选项卡应该在用户点击详细信息时可见，而且应该是针对该订单本身而不是他的其余命令。

以下是我的PHP代码

<div class="detail-btn" id="detail_button">
  <a href="javascript:void(0)">DETAILS</a>
</div>

<div class="detailShow" id="detailbtnshow"></div>

<div class="detail-btn" id="detail_button">
  <a href="javascript:void(0)">DETAILS</a>
</div>

<div class="detailShow" id="detailbtnshow"></div>

<div class="detail-btn" id="detail_button">
  <a href="javascript:void(0)">DETAILS</a>
</div>

<div class="detailShow" id="detailbtnshow"></div>

<div class="detail-btn" id="detail_button">
  <a href="javascript:void(0)">DETAILS</a>
</div>

<div class="detailShow" id="detailbtnshow"></div>

我使用的JavaScript如下所示。

 $("#detail_button").click(function(){
    $("#detailbtnshow").slideToggle();
 });

我尝试过使用课程唯一的问题是我的所有细节div只需点击一下即可打开，但我希望他们打开一个用户点击相关详细信息按钮

Answer 1

试试这个，你只需要显示点击div的下一个div：

$(".detail-btn").click(function(){
    $(this).next(".detailShow").slideToggle();
});

Answer 2

试试此代码段代码......

＆＃13;

$(".detail-btn").click(function(){
     $('.detailShow').hide();
     $(this).next(".detailShow").slideToggle();
});

＆＃13;

.detailShow{ display:none;}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="detail-btn" id="detail_button" >
      <a href="javascript:void(0)">DETAILS</a>
	 </div>
    <div class="detailShow" id="detailbtnshow"> 
	aa
    </div>

    <div class="detail-btn" id="detail_button" >
      <a href="javascript:void(0)">DETAILS</a>
	 </div>
    <div class="detailShow" id="detailbtnshow"> 
	bb
    </div>
	
    <div class="detail-btn" id="detail_button" >
      <a href="javascript:void(0)">DETAILS</a>
	 </div>
    <div class="detailShow" id="detailbtnshow"> 
	cc
    </div>
	
    <div class="detail-btn" id="detail_button" >
      <a href="javascript:void(0)">DETAILS</a>
	 </div>
    <div class="detailShow" id="detailbtnshow"> 
	dd
    </div>

＆＃13;

Answer 3

这是一种PHP方法，但做这样的事情很难看：

bower.json

在PHP循环中显示/隐藏

3 个答案: