4

我有以下代码可以将 div （称为#extra）切换到视图中：

$('#more').click(function() {
    $('#extra').slideToggle('fast');
    return false;
});

我的点击功能是这个链接：

<a href="#" id="more">More about us</a>

#extra当div 可见时，如何将“更多关于我们”的文本更改为“更少关于我们” ？当单击相同的链接以隐藏 div 时，我希望链接的文本变回“更多关于我们”的内容。

4

6 回答 6

8

使用此代码：

$('#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;
});

这是演示：http: //jsfiddle.net/AAFAY/

于 2013-07-18T11:42:48.737 回答
5

只是切换文本？

$('#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;
});
于 2013-07-18T11:30:55.763 回答
4

尝试这个

$('#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;
});

演示

于 2013-07-18T11:35:45.573 回答
2

是的，对于这个 Dinesh 的解决方案可能是 jQuery 中最高效的最终优雅，对于 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>

于 2016-04-15T19:43:24.220 回答
2 

$(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>

于 2016-04-15T19:50:30.623 回答
1

我实际上建议使用 jquery 只切换类名并让 css 像这样切换文本：

$('.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>

于 2018-05-25T04:18:13.180 回答