Question

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

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

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

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

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

Answer 1

使用此代码：

$('#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/

Answer 2

只需切换文字吗？

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

Answer 3

试试这个

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

Answer 4

是的，因为这个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>

Answer 5

＆＃13;

$(document).ready(function() {   
    $('#more').click(function() {
        var s = $(this);
            $('#extra').slideToggle('fast', function() {
                s.html(s.text() == 'More..' ? 'Less..' : 'More..');
            });
            return false;
    });
});

＆＃13;

#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;  
}

＆＃13;

<!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>

＆＃13;

$(document).ready(function() {   
    $('#more').click(function() {
        var s = $(this);
            $('#extra').slideToggle('fast', function() {
                s.html(s.text() == 'More..' ? 'Less..' : 'More..');
            });
            return false;
    });
});

＆＃13;

#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;  
}

＆＃13;

<!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>

＆＃13;

Answer 6

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

＆＃13;

$('.btn').click(function(){
  $(this).toggleClass('active');
});

＆＃13;

.btn::before{
  content:"Show";
}

.btn.active::before{
  content:"Hide";
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#" class='btn'></a>

＆＃13;

单击链接时切换文本

6 个答案: