HTML錨文本點擊改變文本內容

-3

我想創建一個javascript下拉菜單。
因爲我想添加一個功能，就像用戶單擊錨標籤時一樣，我想根據下拉打開狀態將文本更改爲（顯示更多或顯示更少）。
我試過了，只是沒有工作或不能在錨標籤內完成。
任何想法？HTML錨文本點擊改變文本內容

2015-11-09 leham789

發佈您嘗試過的代碼。發佈研究也會有幫助。 – Tushar

歡迎來到SO。給我們一些你來，我們會幫你從那裏：D –

這裏是代碼和演示

$('.open_drop_down').click(function(){ 
 
    var text = ($(this).text() === 'Show more') ? 'Show less' : 'Show more'; 
 
    $(this).text(text); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<a href="#tagged" class="open_drop_down">Show more</a>

來源

2015-11-09 04:41:40

你可以嘗試這樣的：從本網站

編號：http://code-tricks.com/jquery-read-more-less-example/

$(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+ '&nbsp;</span><span class="morecontent"><span>' + h + '</span>&nbsp;&nbsp;<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; 
 
    }); 
 
});

.morecontent span { 
 
    display: none; 
 
} 
 
.morelink { 
 
    display: block; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<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>

來源

2015-11-09 04:37:53

HTML錨文本點擊改變文本內容

回答

相關問題