个人中心
gpt4 book ai didi

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

转载 作者：行者123 更新时间：2023-11-28 02:51:24 26 4
gpt4 key购买 nike

我有以下 html 和我网站的脚本。它是可以折叠或展开的文本。您单击 font 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-->

最佳答案

很简单，只需要使用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/

UPDATE:

If that still not work on your wordpress, do this "more working"way:

$(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/

关于javascript - 如何通过单击更改字体超棒的图标 - 可折叠文本，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46658196/

26 4 0
文章推荐： javascript - 移动 Chrome 栏占用 100% 高度 css 的空间
文章推荐： css - 使用 rails 设置背景图像 css
文章推荐： html - 按钮文本堆叠与保持内联
文章推荐： css - 使用 css 网格对齐面板主体内的输入框
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com