当我点击＆＃39;更多＆＃39;它可以工作，但屏幕在顶部。它还显示＆＃39;关闭＆＃39;最后。点击再次关闭后，它仍然“关闭”。我希望它能回到“更多”。我怎么能这样做？
def index
redirect_to root_path if request.env['PATH_INFO'] === '/games'
@games = Game.all
end
<p class="disp-cont">
Several Australian home owners have been utilizing the services of mortgage brokers to fulfill their dreams of owning a house at an affordable rate.
</p>
<p class="more-cont" style="display:none;">
Whether you are aspiring to buy a new house or considering upgrading your existing home loan, an expert mortgage broker can help you achieve your objective in the simplest and easiest way! For the uninitiated, here’s a sneak peek on <strong>what is mortgage broking?</strong><br>
Mortgage broking involves the act of intermediating between the borrower and the lender (bank & non-bank). While on one hand, the loan specialist assists the borrower to qualify for a mortgage, on the other hand, he negotiates with the lender on the borrower’s behalf. The role of mortgage broker starts right from the time when you plan to explore your options of financing/refinancing till the deal is finalized.
</p>
<a href="#" class="more">more</a>
答案 0 :(得分：2)
你走在正确的轨道上，但是
问题1的： 替换
<a href="#" class="more">more</a>
与
<a href="javascript:void(0)" class="more">more</a>
：
$('.more').click(function() {
$(this).prev('.more-cont').slideToggle();
$(this).html($(this).html()=='close'?'more':'close');
});
答案 1 :(得分：1)
要停止将滚动位置移动到页面顶部，请调用传递给单击处理程序的事件preventDefault()。要切换文本，您可以为text()提供一个函数，该函数根据它的当前文本设置值。试试这个：
$('.more').click(function(e) {
e.preventDefault();
$(this).text(function(i, t) {
return t == 'close' ? 'more' : 'close';
}).prev('.more-cont').slideToggle()
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class="disp-cont">
Several Australian home owners have been utilizing the services of mortgage brokers to fulfill their dreams of owning a house at an affordable rate.
</p>
<p class="more-cont" style="display:none;">
Whether you are aspiring to buy a new house or considering upgrading your existing home loan, an expert mortgage broker can help you achieve your objective in the simplest and easiest way! For the uninitiated, here’s a sneak peek on <strong>what is mortgage broking?</strong>
<br>Mortgage broking involves the act of intermediating between the borrower and the lender (bank & non-bank). While on one hand, the loan specialist assists the borrower to qualify for a mortgage, on the other hand, he negotiates with the lender on the
borrower’s behalf. The role of mortgage broker starts right from the time when you plan to explore your options of financing/refinancing till the deal is finalized.
</p>
<a href="#" class="more">more</a>
<p class="disp-cont">
Several Australian home owners have been utilizing the services of mortgage brokers to fulfill their dreams of owning a house at an affordable rate.
</p>
<p class="more-cont" style="display:none;">
Whether you are aspiring to buy a new house or considering upgrading your existing home loan, an expert mortgage broker can help you achieve your objective in the simplest and easiest way! For the uninitiated, here’s a sneak peek on <strong>what is mortgage broking?</strong>
<br>Mortgage broking involves the act of intermediating between the borrower and the lender (bank & non-bank). While on one hand, the loan specialist assists the borrower to qualify for a mortgage, on the other hand, he negotiates with the lender on the
borrower’s behalf. The role of mortgage broker starts right from the time when you plan to explore your options of financing/refinancing till the deal is finalized.
</p>
<a href="#" class="more">more</a>
答案 2 :(得分：-1)
<强> HTML：
<html>
<head>
<title>jQuery Read More/Less Toggle Example</title>
</head>
<body>
<span class="more">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</span>
<br><br>
<div class="more">
Morbi placerat imperdiet risus quis blandit. Ut lobortis elit luctus, feugiat erat vitae, interdum diam. Nam sit amet arcu vitae justo lacinia ultricies nec eget tellus. Curabitur id sapien massa. In hac <a href="#">habitasse</a> platea dictumst. Integer tristique leo consectetur libero pretium pretium. Nunc sed mauris magna. Praesent varius purus id turpis iaculis iaculis. Nulla <em>convallis magna nunc</em>, id rhoncus massa ornare in. Donec et feugiat sem, ac rhoncus mauris. Quisque eget tempor massa.
</div>
</body>
</html>
<强> CSS：
.morecontent span {
display: none;
}
.morelink {
display: block;
}
<强> JQuery的：
$(document).ready(function() {
// Configure/customize these variables.
var showChar = 100; // How many characters are shown by default
var ellipsestext = "...";
var moretext = "Show more >";
var lesstext = "Show less";
$('.more').each(function() {
var content = $(this).html();
if(content.length > showChar) {
var c = content.substr(0, showChar);
var h = content.substr(showChar, content.length - showChar);
var html = c + '<span class="moreellipses">' + ellipsestext+ ' </span><span class="morecontent"><span>' + h + '</span> <a href="" class="morelink">' + moretext + '</a></span>';
$(this).html(html);
}
});
$(".morelink").click(function(){
if($(this).hasClass("less")) {
$(this).removeClass("less");
$(this).html(moretext);
} else {
$(this).addClass("less");
$(this).html(lesstext);
}
$(this).parent().prev().toggle();
$(this).prev().toggle();
return false;
});
});
您可以看到演示here