我的网站上有以下html脚本。它是可以折叠或展开的文本。单击字体awesome箭头以展开文本。当我点击指向下方的箭头时，我想得到一个字体真棒箭头，即点击指向下方展开文本的箭头和指向折叠文本的箭头。答案将受到高度赞赏！
<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-->
答案 0 :(得分：0)
这很简单，只需使用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/
更新：
如果仍然无法在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); } }); });