如何通过单击可折叠文本来更改超棒字体图标

Question

I have the following html with a script for my website. 我的网站使用以下html脚本。 It is text that can be collapsed or expanded. 它是可以折叠或展开的文本。 You click on the font awesome arrow to expand the text. 您单击字体真棒箭头以展开文本。 I would like to get a font awesome arrow that points up when I click the one that points down ie click on an arrow pointing down to expand text and an arrow pointing up to collapse text. 我想获得一个字体很棒的箭头，当我单击指向下方的箭头时，该箭头指向上方，即单击指向下方的箭头以展开文本，单击指向上方的箭头以折叠文本。 An answer will be highly appreciated! 一个答案将不胜感激！

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

Here is the full code if that helps: 这是完整的代码（如果有帮助的话）：

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

Answer 1

It's simple, just use removeClass() and addClass() function: 很简单，只需使用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();
    });
});

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

UPDATE: 更新：

If that still not work on your wordpress, do this "more working" way: 如果仍然无法在您的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); } }); }); 
Fiddle: http://jsfiddle.net/L0stLym2/ 小提琴： http ： //jsfiddle.net/L0stLym2/

如何通过单击可折叠文本来更改超棒字体图标

问题描述

1 个解决方案

解决方案1
0 2017-10-10 03:52:06

UPDATE: 更新：

如何通过单击可折叠文本来更改超棒字体图标

问题描述

1 个解决方案

解决方案1 0 2017-10-10 03:52:06

UPDATE: 更新：

解决方案1
0 2017-10-10 03:52:06