问题
I have the below code that toggles a div (called #extra) into view:
$('#more').click(function() {
$('#extra').slideToggle('fast');
return false;
});
My click function is this link:
<a href="#" id="more">More about us</a>
How do I get that 'More about us' text to change to read 'Less about us' when the #extra div is visible? When the same link is clicked to hide the div, I'd like the text of the link to change back to read 'More about us'.
回答1:
Just toggle the text ?
$('#more').click(function() {
$('#extra').slideToggle('fast');
$('#more').text(function(_,txt) {
var ret='';
if ( txt == 'More about us' ) {
ret = 'Less about us';
$(this).css('background','url(link/to/image1.png)');
}else{
ret = 'More about us';
$(this).css('background','url(link/to/image2.png)');
}
return ret;
});
return false;
});
回答2:
Use this code :
$('#more').click(function() {
jQuery(this).text('less about us');
if($('#extra').is(':visible')){
jQuery(this).text('Less about us');
}else{
jQuery(this).text('More about us');
}
$('#extra').slideToggle('fast');
return false;
});
Here is the demo : http://jsfiddle.net/AAFaY/
回答3:
Try this
$('#more').click(function() {
var more = $(this);
$('#extra').slideToggle('fast', function(){
more.html(s.text() == 'More about us' ? 'Less about us' : 'More about us');
});
return false;
});
Demo
回答4:
Yes, for this Dinesh's solution is probably most eficient end elegant in jQuery, for hure
$(document).ready(function() {
$('#more').click(function() {
var s = $(this);
$('#extra').slideToggle('fast', function() {
s.html(s.text() == 'More..' ? 'Less..' : 'More..');
});
return false;
});
});#wrapp {
height: 38vh;
width: 40vw;
margin: 50px 50px;
left: 10%;
background-color: blue;
position: absolute;
}
#wrapp #more {
display: inline-block;
padding: 5px;
background: yellow;
}
#extra {
height: 100px;
width: 250px;
position: relative;
margin: 1.2vh auto;
}
#extra p {
position: relative;
color: red;
text-align: center;
vertical-align: center;
padding-top: 3.6vh;
font-size: 2.5em;
font-weight: bold;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="css/main.css">
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script type="text/javascript" src="js/main.js"></script>
<body>
<div id="wrapp">
<header>
<h1>Heading...</h1>
</header>
<a href="#" id="more">Less..</a>
<div id="extra"><p>Whatewer...</p></div>
</div>
</body>回答5:
$(document).ready(function() {
$('#more').click(function() {
var s = $(this);
$('#extra').slideToggle('fast', function() {
s.html(s.text() == 'More..' ? 'Less..' : 'More..');
});
return false;
});
});#wrapp {
height: 38vh;
width: 40vw;
margin: 50px 50px;
left: 10%;
background-color: blue;
position: absolute;
}
#wrapp #more {
display: inline-block;
padding: 5px;
background: yellow;
}
#extra {
height: 100px;
width: 250px;
position: relative;
margin: 1.2vh auto;
}
#extra p {
position: relative;
color: red;
text-align: center;
vertical-align: center;
padding-top: 3.6vh;
font-size: 2.5em;
font-weight: bold;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="css/main.css">
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script type="text/javascript" src="js/main.js"></script>
<body>
<div id="wrapp">
<header>
<h1>Heading...</h1>
</header>
<a href="#" id="more">Less..</a>
<div id="extra"><p>Whatewer...</p></div>
</div>
</body>$(document).ready(function() {
$('#more').click(function() {
var s = $(this);
$('#extra').slideToggle('fast', function() {
s.html(s.text() == 'More..' ? 'Less..' : 'More..');
});
return false;
});
});#wrapp {
height: 38vh;
width: 40vw;
margin: 50px 50px;
left: 10%;
background-color: blue;
position: absolute;
}
#wrapp #more {
display: inline-block;
padding: 5px;
background: yellow;
}
#extra {
height: 100px;
width: 250px;
position: relative;
margin: 1.2vh auto;
}
#extra p {
position: relative;
color: red;
text-align: center;
vertical-align: center;
padding-top: 3.6vh;
font-size: 2.5em;
font-weight: bold;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="css/main.css">
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script type="text/javascript" src="js/main.js"></script>
<body>
<div id="wrapp">
<header>
<h1>Heading...</h1>
</header>
<a href="#" id="more">Less..</a>
<div id="extra"><p>Whatewer...</p></div>
</div>
</body>回答6:
I would actually suggest using jquery to only toggle the class name and have css toggle the text as such:
$('.btn').click(function(){
$(this).toggleClass('active');
});.btn::before{
content:"Show";
}
.btn.active::before{
content:"Hide";
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#" class='btn'></a>来源：https://stackoverflow.com/questions/17722229/toggle-text-when-link-is-clicked