gpt4 book ai didi

javascript - 显示/隐藏带文本的 div

转载 作者:太空宇宙 更新时间:2023-11-03 21:22:36 25 4
gpt4 key购买 nike

我正在尝试制作一个阅读更多类型的按钮,但无法使其正常工作,出于某种原因,文本不会被隐藏,并且当我单击链接时没有任何反应?我似乎无法弄清楚哪里出了问题?

HTML 代码:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="../css/style.css">
<title>Untitled Document</title>

<script>

$('.box').hide();


$('.clickme').each(function() {
$(this).show(0).on('click', function(e) {

e.preventDefault();


$(this).next('.box').slideToggle('fast', function() {
$(this).prev().html($(this).is(':visible') ? 'Hide' : 'Show');
});
});
});


</script>

</head>

<body>


<p><h3>Priser</h3></p>
<div class="container">
<div class="container">
<div class="fixed">Test af panel</div>
<div class="flex-item">795 kr.</div>
</div>
<a href="#" class="clickme">Show</a>
<div class="box">Ved installation af antenneforstærker vil du få besøg af vores tekniker som installerer 1 stk. antenneforstærker i dit hjem. Antenneforstærkeren er IKKE med i denne pris og skal købes ved siden af.</div>
</body>
</html>

CSS 代码:

.clickme {
background-color: #eee;
border-radius: 4px;
color: #666;
display: block;
margin-bottom: 5px;
padding: 5px 10px;
text-decoration: none;
}

.clickme:hover {
text-decoration: underline;
}

.box {
background-color: #ccc;
border-radius: 4px;
color: #333;
margin: 5px 0;
padding: 5px 10px;
width: auto;
}

最佳答案

看看你错过了什么

.clickme {
background-color: #eee;
border-radius: 4px;
color: #666;
display: block;
margin-bottom: 5px;
padding: 5px 10px;
text-decoration: none;
}
.clickme:hover {
text-decoration: underline;
}
.box {
background-color: #ccc;
border-radius: 4px;
color: #333;
margin: 5px 0;
padding: 5px 10px;
width: auto;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('.box').hide();
$('.clickme').each(function() {
$(this).show(0).on('click', function(e) {
e.preventDefault();
$(this).next('.box').slideToggle('fast', function() {
$(this).prev().html($(this).is(':visible') ? 'Hide' : 'Show');
});
});
});
});
</script>
</head>
<body>
<p>
<h3>Priser</h3>
</p>
<div class="container">
<div class="container">
<div class="fixed">Test af panel</div>
<div class="flex-item">795 kr.</div>
</div>
<a href="#" class="clickme">Show</a>
<div class="box">Ved installation af antenneforstærker vil du få besøg af vores tekniker som installerer 1 stk. antenneforstærker i dit hjem. Antenneforstærkeren er IKKE med i denne pris og skal købes ved siden af.</div>
</body>
</html>

关于javascript - 显示/隐藏带文本的 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36060211/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com