0
我已經編寫了這個手風琴，但它有效，但它有一個錯誤，當您打開頁面時，+從一開始就不顯示。Jquery Cross不會從頭開始
我使用數據內容屬性來獲得+，因爲CSS有僞僞類和功能正在工作。
但是，當您單擊第二次工作時，x不會從正方形的開始出現。
我以爲有一些代碼錯過了，但我可以找出
// Add your custom js here
$(document).ready(function() {
//toggle the component with class RevealCard-list
$(".RevealCard-header").click(function() {
if ($(this.id + ' .RevealCard-list').is(':visible')) {
$(this.id + ".RevealCard-list").slideUp(300);
$(this).attr('data-content', '+');
} else {
$(this.id + " .RevealCard-list").slideDown(300);
$(this).attr('data-content', '-');
}
});
});/* Modify this file as required */
.RevealCard {
font-family: sans-serif;
}
.RevealCard-header {
background: #000;
border-radius: 4px 4px 0 0;
color: #fff;
font-size: 1.2em;
font-weight: normal;
margin: 0;
padding: 0.5em;
position: relative;
}
.RevealCard-header::after {
border: 1px solid #fff;
content: attr(data-content);
height: 1.15em;
line-height: 1em;the
position: absolute;
right: 0.5em;
text-align: center;
width: 1.15em;
}
.RevealCard-list {
border: 1px solid #000;
border-top: none;
margin: 0 0 2em 0;
padding-bottom: 1em;
padding-top: 1em;
display: none;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<head>
<title>Exercise 3</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="../css/main.css">
<link rel="stylesheet" href="exercise03.css">
</head>
<body>
<div class="RevealCard">
<h3 class="RevealCard-header">
Top five loves
</h3>
<ol class="RevealCard-list">
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
<li>Fourth item</li>
<li>Fifth item</li>
</ol>
</div>
<div class="RevealCard">
<h3 class="RevealCard-header">
Top five hates
</h3>
<ol class="RevealCard-list">
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
<li>Fourth item</li>
<li>Fifth item</li>
</ol>
</div>
<script src="https://code.jquery.com/jquery-3.2.0.min.js" integrity="sha256-JAW99MJVpJBGcbzEuXk4Az05s/XyDdBomFqNlM3ic+I=" crossorigin="anonymous"></script>
<script>window.jQuery || document.write('<script src="../js/vendor/jquery-3.2.0.min.js"><\/script>')</script>
<script src="../js/plugins.js"></script>
<script src="../js/main.js"></script>
<script src="exercise03.js"></script>
</body>
</html>
這是非常簡單的 - 你使用內容屬性數據的內容，但實際上你單擊框前的數據內容屬性不存在（你已經把它位於jQuery中的click（）函數內，將數據內容添加到HTML代碼中。 – junkfoodjunkie