我有我的網站腳本以下的HTML。這是可以摺疊或展開的文字。你點擊字體真棒箭頭來展開文本。我想獲得一個字體超讚的箭頭，點擊指向下方的箭頭即點擊指向下方的箭頭展開文本，指向箭頭指向合併文本。答案將非常感謝！如何通過點擊更改字體真棒圖標 - 可摺疊文本

<head> 
    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" /> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script> 
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" /> 
    <script> 
     $(document).ready(function() { 
      $("#toggle-button").click(function() { 
       $("#collapse").toggle(); 
      }); 
     }); 
    </script> 
</head> 

<h2 style="font-family: times-new-roman; font-size: 33px; text-align: center; color:rgb(85,174,249)">BIOGRAPHY</h2> 
<div id="collapse" class="biography-box" style="display:none"> 
    <p>Albert Einstein (14 March 1879 – 18 April 1955) was a German-born theoretical physicist.[5] Einstein developed the theory of relativity, one of the two pillars of modern physics (alongside quantum mechanics).[4][6]:274 Einstein's work is also known for its influence on the philosophy of science.[7][8] Einstein is best known by the general public for his mass–energy equivalence formula E = mc2 (which has been dubbed "the world's most famous equation"). 
    </p> 
</div> 
<button id="toggle-button" class="btn btn-info" style="color: black; background-color: transparent; border: none; font-color: black; width:778px" type="button"> 
<i class="fa fa-angle-double-down"></i> 
</button>

下面是完整的代碼是否有幫助：

<head> 
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script> 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/> 
<script> 
$(function() { 
    $("#toggle-button").click(function() { 
     var i = $(this).find('i'); 
     if ($("#collapse").is(':visible')) { 
      i.removeClass('fa-angle-double-up').addClass('fa-angle-double-down'); 
      $("#collapse").slideUp(400); 
     } else { 
      i.removeClass('fa-angle-double-down').addClass('fa-angle-double-up'); 
      $("#collapse").slideDown(400); 
     } 
    }); 
}); 

</script> 
</head> 



<div class="container"> 
<div class="row"> 
<div class="col-xl-12 col-lg-12 col-md-12"> 

<svg height="5" width="750"> 
    <line x1="0" y1="3" x2="750" y2="3" style="stroke:black;stroke-width:4" /> 
</svg> 

<h2 style="font-family: times-new-roman; font-size: 33px; text-align: center; color:rgb(85,174,249)">BIOGRAPHY</h2> 
<br class=""> 

<div id="collapse" class="biography-box" style="display:none"> 
<p class="fehlbio" style="font-size: 16px;">Fred Fehl (January 21, 1906 – October 5, 1995) was an American photographer of Viennese birth and upbringing. He was the cousin of the art historian Philipp Fehl and the inventor and Electrical Engineer Paul Eisler.</p> 
<p class="fehlbio" style="font-size: 16px;">Fehl escaped from Vienna in 1939 with the assistance of the company he worked for, went to briefly to London, and then to New York City. The first person in America to make a career of performance photography, for over forty years he covered Broadway as well as dance, opera, and music. He was the permanent photographer of the American Ballet Theatre, the New York City Opera, and the New York City Ballet. His pictures have appeared in the New York Times, major national magazines, and in hundreds of books on theater, dance, and music.</p> 
<p class="fehlbio" style="font-size: 16px;">Fehl took photographs of over 1,000 Broadway plays. Included are photographs of Shirley Booth, José Ferrer, Judith Anderson, Maurice Evans, Lilli Palmer, Melvyn Douglas, Louis Calhern, Celeste Holm, Helen Hayes, Henry Fonda, Claude Rains, Beatrice Lillie, Rex Harrison, Ethel Merman, Charles Boyer, John Garfield, Ezio Pinza, Mary Martin, Arlene Francis, Eddie Cantor, Gwen Verdon, and Marlon Brando.</p> 
<p style="font-size: 16px;">In addition to the American Ballet Theater and the New York City Ballet, Fred Fehl photographed the Ballet Russe de Monte Carlo, the Joffrey Company, Martha Graham, and the Alvin Ailey Company.</p> 
<p class="fehlbio" style="font-size: 16px;">His numerous dance photographs include Martha Graham, Vera Zorina, André Eglevsky, Rudolf Nureyev, Mikhail Baryshnikov, Suzanne Farrell, Peter Martins, Heather Watts, Darci Kistler, Barbara Fisher, Kyra Nichols, Alicia Markova, Erik Bruhn, Carla Fracci, Natalia Makarova, Judith Jamison, Violette Verdy, Allegra Kent, Patricia McBride, José Limón, Dame Margot Fonteyn, Agnes de Mille, Anton Dolin, Alexandra Danilova, Maria Tallchief, Lupe Serrano, Tanaquil LeClercq, Jillana, Diana Adams, Rosella Hightower, Gelsey Kirkland, Cynthia Gregory, Karin von Aroldingen, Kay Mazzo, Fernando Bujones, Jacques d'Amboise, Edward Villella, Alicia Alonso, and many others.</p> 
<p class="fehlbio" style="font-size: 16px;">Fehl's opera photographs include the New York City Opera, the San Carlo Opera, Alexander, Igor Kipnis, Margaret Severn, Roberta Peters, Norman Treigle, Judith Raskin, Dame Joan Sutherland, and Beverly Sills. He photographed the New York Philharmonic Concerts at Lewisohn Stadium. His photographs of conductors and musicians includes Eugene Ormandy, Dmitri Mitropolous, John Browning, André Watts, Alesander Brailowsky, Eugene List, Lorin Maazel, Andre Kostelanez, Igor Markevitch, Lukas Foss, Bruno Walter, Arturo Toscanini, Julius Rudel, and Leopold Stokowski. 
The Harry Ransom Center and the New York Public Library hold many Fred Fehl photographs and books.</p> 
</div> 
<!--collapse--> 

</div> 
<!--col-xl-12--> 

</div> 
<!--row--> 

<div class="row"> 
<div class="col-xl-12 col-lg-12 col-md-12"> 

<button class="btn btn-info" style="color: black; background-color: transparent; border: none; font-color: black; width:778px" type="button" id="toggle-button"> 

<div class="bio-expand-icon" style="text-align:center; font-size:30px; transform:scale(0.8, 1);"> 
<i class="fa fa-angle-double-down"></i> 
</div> 
</button> 

<svg height="5" width="750"> 
    <line x1="0" y1="3" x2="750" y2="3" style="stroke:black;stroke-width:4" /> 
</svg> 

</div> 
<!--col-xl-12--> 

</div> 
<!--row--> 


</div> 
<!--.container-->

來源

2017-10-10 Aron Tesfay

很簡單，只需使用removeClass()和addClass()功能：

$(function() { 
    $("#toggle-button").click(function() { 
     var i = $(this).find('i'); 
     if ($("#collapse").is(':visible')) { 
      i.removeClass('fa-angle-double-up').addClass('fa-angle-double-down'); 
     } else { 
      i.removeClass('fa-angle-double-down').addClass('fa-angle-double-up'); 
     } 
     $("#collapse").toggle(); 
    }); 
});

小提琴：http://jsfiddle.net/r38ewyue/

UPDATE：

如果仍然無法在你的WordPress的工作，做到這一點「更多工作」 方式：

$(function() { 
    $("#toggle-button").click(function() { 
     var i = $(this).find('i'); 
     if ($("#collapse").is(':visible')) { 
      i.removeClass('fa-angle-double-up').addClass('fa-angle-double-down'); 
      $("#collapse").slideUp(400); 
     } else { 
      i.removeClass('fa-angle-double-down').addClass('fa-angle-double-up'); 
      $("#collapse").slideDown(400); 
     } 
    }); 
});

小提琴：http://jsfiddle.net/L0stLym2/

來源

2017-10-10 03:52:06

這個腳本也運行良好除了在wordpress中。在我創建的網站上，一切看起來都很好，直到我點擊箭頭並意識到文本不會擴展 –

@AronTesfay我已經用「更多工作」方式更新了我的答案。請檢查並嘗試。希望它能工作。 –

它仍然無法正常工作。我會添加下面的完整代碼，如果有幫助 –

如何通過點擊更改字體真棒圖標 - 可摺疊文本

回答

UPDATE：

相關問題