我正在尝试学习如何使用 jQuery 来展开/折叠网页上的文本，但不确定如何使用“a href”链接来实现此目的？我希望用户通过单击“显示更多”链接来展开或折叠文本。我知道您必须添加或删除“隐藏”类才能执行此操作，但是我到底如何使用切换类来实现此目的？
* {
margin: 0;
padding: 0;
}
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 87.5%;
width: 650px;
margin: 0 auto;
padding: 15px 25px;
border: 3px solid blue;
}
h1 {
font-size: 150%;
}
h2 {
font-size: 120%;
padding: .25em 0 .25em 25px;
}
div.hide {
display: none;
}
ul {
padding-left: 45px;
}
li {
padding-bottom: .4em;
}
p, a {
padding-bottom: .4em;
padding-left: 25px;
}
a, a:focus, a:hover {
color: blue;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="main.css">
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="subset_expansion.js"></script>
</head>
<body>
<main id="jdom">
<h1>Expanding and Collapsing messages</h1>
<h2>Message 1</h2>
<div>
<p>Click the link below to expand this message</p>
</div>
<div class="hide">
<p>Hello!</p>
</div>
<a href="#">Show more</a>
<h2>Message 2</h2>
<div>
<p>Click the link below to expand this message</p>
</div>
<div class="hide">
<p>BOOP</p>
</div>
<a href="#">Show more</a>
<h2>Message 3</h2>
<div>
<p>Click the link below to expance this message</p>
</div>
<div class="hide">
<p>Things to do when you're bored</p>
<ul>
<li>Go for a walk</li>
<li>Try your hand at painting.</li>
<li>Listen to music</li>
</ul>
</div>
<a href="#">Show more</a>
</main>
</body>
</html>最佳答案
$(document).ready(function(){
$('a').on( "click", function(){
$(this).prev("div").toggleClass('hide');
if($(this).text() == 'Show more')
{
$(this).text('Show Less');
}
else
{
$(this).text('Show more');
}
});
});* {
margin: 0;
padding: 0;
}
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 87.5%;
width: 650px;
margin: 0 auto;
padding: 15px 25px;
border: 3px solid blue;
}
h1 {
font-size: 150%;
}
h2 {
font-size: 120%;
padding: .25em 0 .25em 25px;
}
div.hide {
display: none;
}
ul {
padding-left: 45px;
}
li {
padding-bottom: .4em;
}
p, a {
padding-bottom: .4em;
padding-left: 25px;
}
a, a:focus, a:hover {
color: blue;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
</head>
<body>
<main id="jdom">
<h1>Expanding and Collapsing messages</h1>
<h2>Message 1</h2>
<div>
<p>Click the link below to expand this message</p>
</div>
<div class="hide">
<p>Hello!</p>
</div>
<a href="javasctipt:void();">Show more</a>
<h2>Message 2</h2>
<div>
<p>Click the link below to expand this message</p>
</div>
<div class="hide">
<p>BOOP</p>
</div>
<a href="javasctipt:void();">Show more</a>
<h2>Message 3</h2>
<div>
<p>Click the link below to expance this message</p>
</div>
<div class="hide">
<p>Things to do when you're bored</p>
<ul>
<li>Go for a walk</li>
<li>Try your hand at painting.</li>
<li>Listen to music</li>
</ul>
</div>
<a href="javasctipt:void();">Show more</a>
</main>
</body>
</html>关于javascript - 使用 jQuery 展开或折叠文本，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43534363/