我目前正在尝试用toggle制作表。
下面是我现在考虑的逻辑。
用户在看到jsp页面时可以看到原始的表内容
单击每一行时，它会在下面显示另一行，其中包含额外的信息
当用户在第2步中单击的行时，包含额外信息的行将被隐藏。（切换）
问题是，额外的信息显示后，我点击行，但不能使它隐藏与另一次点击。
我只是看到了bootstrap的文档，并使用了相同的代码（只是更改了某个标记的id），但无法找出问题的根源。
有人能看到我的jsp页面代码并帮助我吗？
下面是我刚才看到的引导文档。
https://getbootstrap.com/docs/4.3/components/collapse/
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>구매내역 조회</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
</head>
<body>
<jsp:include page="../common/header.jsp"/>
<script>
$(function(){
if(${not empty message}){
alert("${message}");
}
})
</script>
<br><br>
<div class="container">
<h2>구매내역 조회</h2>
<br>
  구매자 아이디 : ${loginUser.userId}
<table class="table">
<thead>
<tr>
<th>거래번호</th>
<th>구매자명</th>
<th>구매물품</th>
<th>구매수량</th>
<th>등록날짜</th>
<th>수정날짜</th>
<th>구매상태</th>
<th>상태수정</th>
</tr>
</thead>
<tbody>
<c:forEach items="${purchaseHistories}" var="purchaseHistory">
<tr>
<td>${purchaseHistory.phNo}</td>
<c:set var="sharp" value="<%='#'%>"/>
<td><a data-toggle="collapse" href="${sharp}detail_${purchaseHistory.phNo}" aria-expanded="false" aria-controls="detail_${purchaseHistory.phNo}">${purchaseHistory.phBuyerName}</a></td>
<td><a href="detail.gb?pNo=${purchaseHistory.phProduct}">${purchaseHistory.phProductName}</a></td>
<td>${purchaseHistory.phQuantity}</td>
<td>${purchaseHistory.phRecordDate}</td>
<td>${purchaseHistory.phChangeDate}</td>
<c:if test="${purchaseHistory.phStatus eq 'N'}">
<td>거래 취소</td>
<td> </td>
</c:if>
<c:if test="${purchaseHistory.phStatus eq 'Y'}">
<c:if test="${purchaseHistory.phSalesStatus eq 'W'}">
<td>거래 대기</td>
<td>
<a class="btn btn-danger btn-sm" href="cancelDeal.gb?phNo=${purchaseHistory.phNo}&phProduct=${purchaseHistory.phProduct}&phBuyer=${purchaseHistory.phBuyer}" onclick=" return cancelDeal();">취소하기</a>
</td>
</c:if>
<c:if test="${purchaseHistory.phSalesStatus eq 'R'}">
<td>발송 준비</td>
<td> </td>
</c:if>
<c:if test="${purchaseHistory.phSalesStatus eq 'C'}">
<td>발송 완료</td>
<td></td>
</c:if>
</c:if>
</tr>
<tr>
<td colspan="8">
<div id="detail_${purchaseHistory.phNo}" class="collapse">
<b>세부정보 조회</b>
<br><br>
<ul>
<li>제품명 : ${purchaseHistory.phProduct}</li>
<li>판매자ID : ${purchaseHistory.phSeller}</li>
<li>받는주소 : ${purchaseHistory.phAddress}</li>
<li>배송정보 : ${purchaseHistory.phInvoice}</li>
</ul>
</div>
</td>
</tr>
</c:forEach>
</tbody>
</table>
</div>
<script>
function cancelDeal(){
return confirm("정말 취소하시겠습니까?");
}
</script>
</body>
</html>行用户必须单击才能看到隐藏行是具有数据切换属性的标记。隐藏的行是名为“collapse”的类的标记。
暂无答案！
目前还没有任何答案，快来回答吧！