每次單擊按鈕，我都想在兩個功能之間切換

Question

我的內容很長，只希望顯示其中的一部分，當用戶單擊“閱讀更多”時，我想顯示整個內容，並將按鈕從“閱讀更多”更改為“閱讀較少”，並且保持不變從“少讀”到“多讀”。 我怎樣才能做到這一點？ 我在下面附上了我的代碼，

 $(document).ready(function(){ $("#click-me").on("click", function(){ $(this).html("Read Less"); $(".content").css("overflow","auto"); $(".content").css("height","auto"); }); }); 

 .card{ border: 1px solid black; margin: 10px; padding: 20px; } .content{ overflow: hidden; height: 40px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="card"> <div class="content"> Game of Thrones is an American fantasy drama television series created by David Benioff and DB Weiss. It is an adaptation of A Song of Ice and Fire, George RR Martin's series of fantasy novels, the first of which is A Game of Thrones. It is filmed in Belfast and elsewhere in the United Kingdom, Canada, Croatia, Iceland, Malta, Morocco, Spain, and the United States. The series premiered on HBO in the United States on April 17, 2011, and its seventh season ended on August 27, 2017. The series will conclude with its eighth season premiering either in 2018 or 2019.[1] Set on the fictional continents of Westeros and Essos, Game of Thrones has several plot lines and a large ensemble cast but centers on three primary story arcs. The first story arc centers on the Iron Throne of the Seven Kingdoms and follows a web of alliances and conflicts among the dynastic noble families either vying to claim the throne or fighting for independence from the throne. The second story arc focuses on the last descendant of the realm's deposed ruling dynasty, exiled and plotting a return to the throne. The third story arc centers on the longstanding brotherhood charged with defending the realm against the ancient threats of the fierce peoples and legendary creatures that lie far north, and an impending winter that threatens the realm.Game of Thrones has attracted record viewership on HBO and has a broad, active, international fan base. It has been acclaimed by critics, particularly for its acting, complex characters, story, scope, and production values, although its frequent use of nudity and violence (including sexual violence) has been criticized. The series has received 38 Primetime Emmy Awards, including Outstanding Drama Series in 2015 and 2016, more than any other primetime scripted television series. Its other awards and nominations include three Hugo Awards for Best Dramatic Presentation (2012–2014), a 2011 Peabody Award, and four nominations for the Golden Globe Award for Best Television Series – Drama (2012 and 2015–2017). Of the ensemble cast, Peter Dinklage has won two Primetime Emmy Awards for Outstanding Supporting Actor in a Drama Series (2011 and 2015) and the Golden Globe Award for Best Supporting Actor – Series, Miniseries or Television Film (2012) for his performance as Tyrion Lannister. Lena Headey, Emilia Clarke, Kit Harington, Maisie Williams, Diana Rigg, and Max von Sydow have also received Primetime Emmy Award nominations for their performances in the series. </div> <button id="click-me">Read More</button> </div> 

現在，我能夠從“讀更多”切換到“讀更少”，但是我沒有繼續從“讀更少”切換到“讀更多”的方法。

編輯：

如果我要顯示多個內容，然后又想在“多讀”和“少讀”之間切換怎么辦？ 我在下面附加我的代碼，我在使用'this'對象訪問當前對象，但沒有繼續學習如何訪問該元素的內容。

 $(document).ready(function(){ var readMore=true; $(".more-less").on("click", function(){ var txt=$(this).html(); console.log($(this)); if(readMore){ $(this).html("Read Less"); $('.content').css("overflow","auto"); $(this).css("height","auto"); readMore=false; }else{ $(this).html("Read More..."); $('.content').css("overflow","hidden"); $(this).css("height","40px"); readMore=true; } }); }); 

 .card{ border: 1px solid black; margin: 10px; padding: 20px; } .content{ overflow: hidden; height: 40px; } .more-less{ text-decoration: none; font-weight: bold; } 

 <div class="card"> <div class="content"> Game of Thrones is an American fantasy drama television series created by David Benioff and DB Weiss. It is an adaptation of A Song of Ice and Fire, George RR Martin's series of fantasy novels, the first of which is A Game of Thrones. It is filmed in Belfast and elsewhere in the United Kingdom, Canada, Croatia, Iceland, Malta, Morocco, Spain, and the United States. The series premiered on HBO in the United States on April 17, 2011, and its seventh season ended on August 27, 2017. The series will conclude with its eighth season premiering either in 2018 or 2019.[1] Set on the fictional continents of Westeros and Essos, Game of Thrones has several plot lines and a large ensemble cast but centers on three primary story arcs. The first story arc centers on the Iron Throne of the Seven Kingdoms and follows a web of alliances and conflicts among the dynastic noble families either vying to claim the throne or fighting for independence from the throne. The second story arc focuses on the last descendant of the realm's deposed ruling dynasty, exiled and plotting a return to the throne. The third story arc centers on the longstanding brotherhood charged with defending the realm against the ancient threats of the fierce peoples and legendary creatures that lie far north, and an impending winter that threatens the realm.Game of Thrones has attracted record viewership on HBO and has a broad, active, international fan base. It has been acclaimed by critics, particularly for its acting, complex characters, story, scope, and production values, although its frequent use of nudity and violence (including sexual violence) has been criticized. The series has received 38 Primetime Emmy Awards, including Outstanding Drama Series in 2015 and 2016, more than any other primetime scripted television series. Its other awards and nominations include three Hugo Awards for Best Dramatic Presentation (2012–2014), a 2011 Peabody Award, and four nominations for the Golden Globe Award for Best Television Series – Drama (2012 and 2015–2017). Of the ensemble cast, Peter Dinklage has won two Primetime Emmy Awards for Outstanding Supporting Actor in a Drama Series (2011 and 2015) and the Golden Globe Award for Best Supporting Actor – Series, Miniseries or Television Film (2012) for his performance as Tyrion Lannister. Lena Headey, Emilia Clarke, Kit Harington, Maisie Williams, Diana Rigg, and Max von Sydow have also received Primetime Emmy Award nominations for their performances in the series. </div> <a href="#" class="more-less">Read More...</a> </div> <div class="card"> <div class="content"> Game of Thrones is an American fantasy drama television series created by David Benioff and DB Weiss. It is an adaptation of A Song of Ice and Fire, George RR Martin's series of fantasy novels, the first of which is A Game of Thrones. It is filmed in Belfast and elsewhere in the United Kingdom, Canada, Croatia, Iceland, Malta, Morocco, Spain, and the United States. The series premiered on HBO in the United States on April 17, 2011, and its seventh season ended on August 27, 2017. The series will conclude with its eighth season premiering either in 2018 or 2019.[1] Set on the fictional continents of Westeros and Essos, Game of Thrones has several plot lines and a large ensemble cast but centers on three primary story arcs. The first story arc centers on the Iron Throne of the Seven Kingdoms and follows a web of alliances and conflicts among the dynastic noble families either vying to claim the throne or fighting for independence from the throne. The second story arc focuses on the last descendant of the realm's deposed ruling dynasty, exiled and plotting a return to the throne. The third story arc centers on the longstanding brotherhood charged with defending the realm against the ancient threats of the fierce peoples and legendary creatures that lie far north, and an impending winter that threatens the realm.Game of Thrones has attracted record viewership on HBO and has a broad, active, international fan base. It has been acclaimed by critics, particularly for its acting, complex characters, story, scope, and production values, although its frequent use of nudity and violence (including sexual violence) has been criticized. The series has received 38 Primetime Emmy Awards, including Outstanding Drama Series in 2015 and 2016, more than any other primetime scripted television series. Its other awards and nominations include three Hugo Awards for Best Dramatic Presentation (2012–2014), a 2011 Peabody Award, and four nominations for the Golden Globe Award for Best Television Series – Drama (2012 and 2015–2017). Of the ensemble cast, Peter Dinklage has won two Primetime Emmy Awards for Outstanding Supporting Actor in a Drama Series (2011 and 2015) and the Golden Globe Award for Best Supporting Actor – Series, Miniseries or Television Film (2012) for his performance as Tyrion Lannister. Lena Headey, Emilia Clarke, Kit Harington, Maisie Williams, Diana Rigg, and Max von Sydow have also received Primetime Emmy Award nominations for their performances in the series. </div> <a href="#" class="more-less">Read More...</a> </div> 

感謝您的回答。

Answer 1

我使用了帶有類的委托來控制狀態。

 $(document).ready(function(){ $('#read-options') .on('click', "#click-me.expanded", function(){ $(this).html("Read More").removeClass('expanded'); $(".content").css("overflow",""); $(".content").css("height",""); }).on('click', "#click-me:not(.expanded)", function(){ $(this).html("Read Less").addClass('expanded'); $(".content").css("overflow","auto"); $(".content").css("height","auto"); }); }); 

 .card{ border: 1px solid black; margin: 10px; padding: 20px; } .content{ overflow: hidden; height: 40px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="card"> <div class="content"> Game of Thrones is an American fantasy drama television series created by David Benioff and DB Weiss. It is an adaptation of A Song of Ice and Fire, George RR Martin's series of fantasy novels, the first of which is A Game of Thrones. It is filmed in Belfast and elsewhere in the United Kingdom, Canada, Croatia, Iceland, Malta, Morocco, Spain, and the United States. The series premiered on HBO in the United States on April 17, 2011, and its seventh season ended on August 27, 2017. The series will conclude with its eighth season premiering either in 2018 or 2019.[1] Set on the fictional continents of Westeros and Essos, Game of Thrones has several plot lines and a large ensemble cast but centers on three primary story arcs. The first story arc centers on the Iron Throne of the Seven Kingdoms and follows a web of alliances and conflicts among the dynastic noble families either vying to claim the throne or fighting for independence from the throne. The second story arc focuses on the last descendant of the realm's deposed ruling dynasty, exiled and plotting a return to the throne. The third story arc centers on the longstanding brotherhood charged with defending the realm against the ancient threats of the fierce peoples and legendary creatures that lie far north, and an impending winter that threatens the realm.Game of Thrones has attracted record viewership on HBO and has a broad, active, international fan base. It has been acclaimed by critics, particularly for its acting, complex characters, story, scope, and production values, although its frequent use of nudity and violence (including sexual violence) has been criticized. The series has received 38 Primetime Emmy Awards, including Outstanding Drama Series in 2015 and 2016, more than any other primetime scripted television series. Its other awards and nominations include three Hugo Awards for Best Dramatic Presentation (2012–2014), a 2011 Peabody Award, and four nominations for the Golden Globe Award for Best Television Series – Drama (2012 and 2015–2017). Of the ensemble cast, Peter Dinklage has won two Primetime Emmy Awards for Outstanding Supporting Actor in a Drama Series (2011 and 2015) and the Golden Globe Award for Best Supporting Actor – Series, Miniseries or Television Film (2012) for his performance as Tyrion Lannister. Lena Headey, Emilia Clarke, Kit Harington, Maisie Williams, Diana Rigg, and Max von Sydow have also received Primetime Emmy Award nominations for their performances in the series. </div> <span id="read-options"> <button id="click-me">Read More</button> </span> </div> 

Answer 2

答案已更新，可以回答其他問題。

實現此目的的最簡單方法是創建其他CSS類，然后單擊以切換它。 看到您想使其適用於多個按鈕，我們也應該更新HTML。 該代碼將不依賴於按鈕的id屬性：

 $(document).ready(function(){ $(".toggle-more").on("click", function(){ $(this).closest(".card").toggleClass("show-more"); }); }); 

 .card { border: 1px solid black; margin: 10px; padding: 20px; } .card .content { overflow: hidden; height: 40px; } .card.show-more .content { overflow: auto; height: auto; } .card .toggle-more:before { content: "Read More"; } .card.show-more .toggle-more:before { content: "Read Less"; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="card"> <div class="content"> Game of Thrones is an American fantasy drama television series created by David Benioff and DB Weiss. It is an adaptation of A Song of Ice and Fire, George RR Martin's series of fantasy novels, the first of which is A Game of Thrones. It is filmed in Belfast and elsewhere in the United Kingdom, Canada, Croatia, Iceland, Malta, Morocco, Spain, and the United States. The series premiered on HBO in the United States on April 17, 2011, and its seventh season ended on August 27, 2017. The series will conclude with its eighth season premiering either in 2018 or 2019.[1] Set on the fictional continents of Westeros and Essos, Game of Thrones has several plot lines and a large ensemble cast but centers on three primary story arcs. The first story arc centers on the Iron Throne of the Seven Kingdoms and follows a web of alliances and conflicts among the dynastic noble families either vying to claim the throne or fighting for independence from the throne. The second story arc focuses on the last descendant of the realm's deposed ruling dynasty, exiled and plotting a return to the throne. The third story arc centers on the longstanding brotherhood charged with defending the realm against the ancient threats of the fierce peoples and legendary creatures that lie far north, and an impending winter that threatens the realm.Game of Thrones has attracted record viewership on HBO and has a broad, active, international fan base. It has been acclaimed by critics, particularly for its acting, complex characters, story, scope, and production values, although its frequent use of nudity and violence (including sexual violence) has been criticized. The series has received 38 Primetime Emmy Awards, including Outstanding Drama Series in 2015 and 2016, more than any other primetime scripted television series. Its other awards and nominations include three Hugo Awards for Best Dramatic Presentation (2012–2014), a 2011 Peabody Award, and four nominations for the Golden Globe Award for Best Television Series – Drama (2012 and 2015–2017). Of the ensemble cast, Peter Dinklage has won two Primetime Emmy Awards for Outstanding Supporting Actor in a Drama Series (2011 and 2015) and the Golden Globe Award for Best Supporting Actor – Series, Miniseries or Television Film (2012) for his performance as Tyrion Lannister. Lena Headey, Emilia Clarke, Kit Harington, Maisie Williams, Diana Rigg, and Max von Sydow have also received Primetime Emmy Award nominations for their performances in the series. </div> <button class="toggle-more"></button> </div> <div class="card"> <div class="content"> Game of Thrones is an American fantasy drama television series created by David Benioff and DB Weiss. It is an adaptation of A Song of Ice and Fire, George RR Martin's series of fantasy novels, the first of which is A Game of Thrones. It is filmed in Belfast and elsewhere in the United Kingdom, Canada, Croatia, Iceland, Malta, Morocco, Spain, and the United States. The series premiered on HBO in the United States on April 17, 2011, and its seventh season ended on August 27, 2017. The series will conclude with its eighth season premiering either in 2018 or 2019.[1] Set on the fictional continents of Westeros and Essos, Game of Thrones has several plot lines and a large ensemble cast but centers on three primary story arcs. The first story arc centers on the Iron Throne of the Seven Kingdoms and follows a web of alliances and conflicts among the dynastic noble families either vying to claim the throne or fighting for independence from the throne. The second story arc focuses on the last descendant of the realm's deposed ruling dynasty, exiled and plotting a return to the throne. The third story arc centers on the longstanding brotherhood charged with defending the realm against the ancient threats of the fierce peoples and legendary creatures that lie far north, and an impending winter that threatens the realm.Game of Thrones has attracted record viewership on HBO and has a broad, active, international fan base. It has been acclaimed by critics, particularly for its acting, complex characters, story, scope, and production values, although its frequent use of nudity and violence (including sexual violence) has been criticized. The series has received 38 Primetime Emmy Awards, including Outstanding Drama Series in 2015 and 2016, more than any other primetime scripted television series. Its other awards and nominations include three Hugo Awards for Best Dramatic Presentation (2012–2014), a 2011 Peabody Award, and four nominations for the Golden Globe Award for Best Television Series – Drama (2012 and 2015–2017). Of the ensemble cast, Peter Dinklage has won two Primetime Emmy Awards for Outstanding Supporting Actor in a Drama Series (2011 and 2015) and the Golden Globe Award for Best Supporting Actor – Series, Miniseries or Television Film (2012) for his performance as Tyrion Lannister. Lena Headey, Emilia Clarke, Kit Harington, Maisie Williams, Diana Rigg, and Max von Sydow have also received Primetime Emmy Award nominations for their performances in the series. </div> <button class="toggle-more"></button> </div> 

Answer 3

您可以只檢查當前文本是什么，然后執行其他操作。

$(document).ready(function(){
  $("#click-me").on("click",  function(){
    if ($(this).html() === "Read More") {
      // Change to Read Less
    } else { 
      // Change to Read More
    }

  });
});

Answer 4

 $(document).ready(function(){ var readMore=true; $(".more-less").on("click", function(){ var txt=$(this).html(); console.log($(this)); if(readMore){ $(this).html("Read Less"); $(this).parent().find('.content').css("overflow","auto"); $(this).css("height","auto"); readMore=false; }else{ $(this).html("Read More..."); $(this).parent().find('.content').css("overflow","hidden"); $(this).css("height","40px"); readMore=true; } }); }); 

 .card{ border: 1px solid black; margin: 10px; padding: 20px; } .content{ overflow: hidden; height: 40px; } .more-less{ text-decoration: none; font-weight: bold; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="card"> <div class="content"> Game of Thrones is an American fantasy drama television series created by David Benioff and DB Weiss. It is an adaptation of A Song of Ice and Fire, George RR Martin's series of fantasy novels, the first of which is A Game of Thrones. It is filmed in Belfast and elsewhere in the United Kingdom, Canada, Croatia, Iceland, Malta, Morocco, Spain, and the United States. The series premiered on HBO in the United States on April 17, 2011, and its seventh season ended on August 27, 2017. The series will conclude with its eighth season premiering either in 2018 or 2019.[1] Set on the fictional continents of Westeros and Essos, Game of Thrones has several plot lines and a large ensemble cast but centers on three primary story arcs. The first story arc centers on the Iron Throne of the Seven Kingdoms and follows a web of alliances and conflicts among the dynastic noble families either vying to claim the throne or fighting for independence from the throne. The second story arc focuses on the last descendant of the realm's deposed ruling dynasty, exiled and plotting a return to the throne. The third story arc centers on the longstanding brotherhood charged with defending the realm against the ancient threats of the fierce peoples and legendary creatures that lie far north, and an impending winter that threatens the realm.Game of Thrones has attracted record viewership on HBO and has a broad, active, international fan base. It has been acclaimed by critics, particularly for its acting, complex characters, story, scope, and production values, although its frequent use of nudity and violence (including sexual violence) has been criticized. The series has received 38 Primetime Emmy Awards, including Outstanding Drama Series in 2015 and 2016, more than any other primetime scripted television series. Its other awards and nominations include three Hugo Awards for Best Dramatic Presentation (2012–2014), a 2011 Peabody Award, and four nominations for the Golden Globe Award for Best Television Series – Drama (2012 and 2015–2017). Of the ensemble cast, Peter Dinklage has won two Primetime Emmy Awards for Outstanding Supporting Actor in a Drama Series (2011 and 2015) and the Golden Globe Award for Best Supporting Actor – Series, Miniseries or Television Film (2012) for his performance as Tyrion Lannister. Lena Headey, Emilia Clarke, Kit Harington, Maisie Williams, Diana Rigg, and Max von Sydow have also received Primetime Emmy Award nominations for their performances in the series. </div> <a href="#" class="more-less">Read More...</a> </div> <div class="card"> <div class="content"> Game of Thrones is an American fantasy drama television series created by David Benioff and DB Weiss. It is an adaptation of A Song of Ice and Fire, George RR Martin's series of fantasy novels, the first of which is A Game of Thrones. It is filmed in Belfast and elsewhere in the United Kingdom, Canada, Croatia, Iceland, Malta, Morocco, Spain, and the United States. The series premiered on HBO in the United States on April 17, 2011, and its seventh season ended on August 27, 2017. The series will conclude with its eighth season premiering either in 2018 or 2019.[1] Set on the fictional continents of Westeros and Essos, Game of Thrones has several plot lines and a large ensemble cast but centers on three primary story arcs. The first story arc centers on the Iron Throne of the Seven Kingdoms and follows a web of alliances and conflicts among the dynastic noble families either vying to claim the throne or fighting for independence from the throne. The second story arc focuses on the last descendant of the realm's deposed ruling dynasty, exiled and plotting a return to the throne. The third story arc centers on the longstanding brotherhood charged with defending the realm against the ancient threats of the fierce peoples and legendary creatures that lie far north, and an impending winter that threatens the realm.Game of Thrones has attracted record viewership on HBO and has a broad, active, international fan base. It has been acclaimed by critics, particularly for its acting, complex characters, story, scope, and production values, although its frequent use of nudity and violence (including sexual violence) has been criticized. The series has received 38 Primetime Emmy Awards, including Outstanding Drama Series in 2015 and 2016, more than any other primetime scripted television series. Its other awards and nominations include three Hugo Awards for Best Dramatic Presentation (2012–2014), a 2011 Peabody Award, and four nominations for the Golden Globe Award for Best Television Series – Drama (2012 and 2015–2017). Of the ensemble cast, Peter Dinklage has won two Primetime Emmy Awards for Outstanding Supporting Actor in a Drama Series (2011 and 2015) and the Golden Globe Award for Best Supporting Actor – Series, Miniseries or Television Film (2012) for his performance as Tyrion Lannister. Lena Headey, Emilia Clarke, Kit Harington, Maisie Williams, Diana Rigg, and Max von Sydow have also received Primetime Emmy Award nominations for their performances in the series. </div> <a href="#" class="more-less">Read More...</a> </div> 

Answer 5

您可以使用HTML5 data-*屬性使同一事件具有不同的答題器：

$("#click-me").on("click",  function(){
  if ($(this).attr("data-shouldOpen") != "false") {
      $(this).attr("data-shouldOpen", "false");
      open(); // opening code here
  } else {
      $(this).attr("data-shouldOpen", "true");
      close(); // closing code here 
  }
});

您可以通過其按鈕關聯不同的div打開/關閉。

Answer 6

    $(document).ready(function(){
  $("#click-me").on("click",  function(){
    $(this).toggleClass('readLess');
    $(".content").toggleClass('hidden');
    if($(this).hasClass('readLess')){
      $(this).text("Read Less");
    }else{
      $(this).text("Read More");
    }
  });
});

.hidden {
  overflow: auto;
  height: auto;
} // add this to your styles