jQuery多重显示/隐藏和切换假链接为“阅读更多...”
我对HTML和CSS非常好，但是当谈到JavaScript时 - 它只是从我身上滑下来。我在这里找到了很好的答案，但如果它与我需要的不匹配，我无法适应它。这是目前为止的项目...jQuery多重显示/隐藏和切换假链接为“阅读更多...”
我有一组文章，其中包括类“title_div story1”，“title_div story2”，“title_div story3”等。用户只能看到每个的前几行。每篇文章的其余部分都有类“hidden_div”。当用户点击某篇文章的任何位置时，该文章的hidden_div将以“slideDown”显示。再次单击并用“slideUp”再次隐藏hidden_div。点击另一篇文章，第一篇文章向上滑动，而新文章则滑落，等等。
到目前为止这么好 - 除了我发现许多用户不会点击，除非他们以某种方式提醒您还有更多需要查看的东西。因此，为了提示用户，我在每篇文章的可见行尾添加了“阅读更多”文本。我给了这个文本类“人造链接”，并将其称为超链接。
问题是我希望单击的文章上的文本从“阅读更多”切换到“阅读更少”，具体取决于hidden_div的显示状态。
我希望有人能帮助我完成我在这里开始的工作。
这是我一直在使用JavaScript和除上述以外，去年小问题，它的伟大工程：
<script type="text/javascript">
$(document).ready(function()
{
$(".title_div").click(
function() {
var div = $(this).attr('rel');
$(".hidden_div").slideUp("fast");
if ($("#"+div).is(":hidden"))
{
$("#"+div).slideDown("fast");
} else {
$("#"+div).slideUp("fast");
}
});
});
</script>
~~~~~从华盛顿古埃德斯使用的信息，我做出这些改变，但“读少了”保持如果另一个打开之前未关闭的文章...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="https://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>test</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js">
</script>
<script type="text/javascript">
$(document).ready(function()
{
$(".title_div").click(function()
{
var div = $(this).attr('rel');
div = $("#" + div);
$(".hidden_div").slideUp("fast");
if (div.is(":hidden"))
{
div.slideDown("fast");
$(".faux-link", this).html("Read less");
// : search for class "faux-link" in this ".title_div" context and change its html text.
} else {
div.slideUp("fast");
$(".faux-link", this).html("Read more");
}
});
});
</script>
<style type="text/css">
.title_div {
margin-bottom: 6px;
margin-left: 24px;
width: 100%;
float: left;
background-color: #6CC;
}
.faux-link {
color: #233b92;
text-decoration: underline;
}
</style>
</head>
<body>
<!-- Lorem story 1 -->
<div class="title_div" rel="story1">
<h3>Story1</h3>
<p>Visible section of the profile article. </p>
<div id="story1" class="hidden_div" style=" display:none;">
<p>Inside the hidden_div1.</p>
<p>Inside the hidden_div1.</p>
<p>Inside the hidden_div1.</p>
<p>Inside the hidden_div1.</p>
</div><!-- /hidden story 1 -->
<p class="faux-link">Read more...</p>
</div><!-- /title-div 1 -->
<!-- Lorem story 2 -->
<div class="title_div" rel="story2">
<h3>Story2</h3>
<p> Visible section of the profile article. </p>
<div id="story2" class="hidden_div" style=" display:none;">
<p>Inside the hidden_div2.</p>
<p>Inside the hidden_div2.</p>
<p>Inside the hidden_div2.</p>
<p>Inside the hidden_div2.</p>
</div><!-- /hidden story 2 -->
<p class="faux-link">Read more...</p>
</div><!-- /title-div 2 -->
<!-- Lorem story 3 -->
<div class="title_div" rel="story3">
<h3>Story3</h3>
<p> Visible section of the profile article. </p>
<div id="story3" class="hidden_div" style=" display:none;">
<p>Inside the hidden_div3.</p>
<p>Inside the hidden_div3.</p>
<p>Inside the hidden_div3.</p>
<p>Inside the hidden_div3.</p>
</div><!-- /hidden story 3 -->
<p class="faux-link">Read more...</p>
</div><!-- /title-div 3 -->
<!-- Lorem story 4 -->
<div class="title_div" rel="story4">
<h3>Story4</h3>
<p> Visible section of the profile article. </p>
<div id="story4" class="hidden_div" style=" display:none;">
<p>Inside the hidden_div4.</p>
<p>Inside the hidden_div4.</p>
<p>Inside the hidden_div4.</p>
<p>Inside the hidden_div4.</p>
</div><!-- /hidden story 4 -->
<p class="faux-link">Read more...</p>
</div><!-- /title-div 4 -->
</body>
</html>
你可以做this：
$(document).ready(function(){
$(".title_div").on("click", function(){
var div = $(this).attr('rel');
div = $("#" + div);
$(".hidden_div").slideUp("fast");
$(".faux-link").html("Read more");
// : all "faux-link" get "Read more" text
if (div.is(":hidden")) {
div.slideDown("fast");
$(".faux-link", this).html("Read less");
// : only the "faux-link" of this ".title_div" get "Read less" text
} else {
div.slideUp("fast");
}
});
});
YES - 人造链接位于title_div内。感谢你的代码，但它没有奏效。当我点击文本时，根本没有改变。可以进行调整吗？我用最后5行进行了实验，并且“几乎”工作。（请参阅下面的代码）点击hidden_div后，“read more”更改为“read less”。然而，如果我点击下一篇文章，第一篇文章就滑了起来，“少读”仍然存在。 – lucchesi609 2015-04-06 21:05:30
@ lucchesi609我看到了你的观点，我为你编辑过：_http：//jsfiddle.net/57x3qgs2/1/_ – 2015-04-07 13:29:23
没错！并感谢小提琴。它让我注意到我需要使用jquery-1.11来实现这个技巧。非常感谢。 – lucchesi609 2015-04-07 20:02:48
请发布您的html – 2015-04-05 21:18:08