我有我的网站脚本以下的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：

相关问题