卡在 jQuery 向下箭頭圖標

Question

大家好，我正在嘗試將 jQuery 中的加號文本符號更改為箭頭圖標，但對我不起作用，是否有機會我們可以將加號更改為箭頭圖標。 我希望任何人都可以幫助我解決這個問題，我正在嘗試創建一些 jQuery 切換動畫。

謝謝

 $(document).ready(function() { $(".accordion_head").click(function() { if ($('.accordion_body').is(':visible')) { $(".accordion_body").slideUp(300); $(".plusminus").text('+'); } if ($(this).next(".accordion_body").is(':visible')) { $(this).next(".accordion_body").slideUp(300); $(this).children(".plusminus").text('+'); } else { $(this).next(".accordion_body").slideDown(300); $(this).children(".plusminus").text('-'); } }); });

 .accordion_head { /* background-color: skyblue; */ color: #1D5AA6; cursor: pointer; border-bottom: 1px solid #f3f3f3; padding: 2rem; }.accordion_body { background: lightgray; }.accordion_body p { padding: 18px 5px; margin: 0px; }.plusminus { float: right; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="accordion_container"> <h3 class="accordion_head"> First Accordian Body, it will have Header <span class="plusminus">+</span></h3> <div class="accordion_body" style="display: none;"> <p>First Accordian Body, it will have description</p> </div> <div class="accordion_head">Second Accordian Head<span class="plusminus">+</span></div> <div class="accordion_body" style="display: none;"> <p>Second Accordian Body, it will have description</p> </div> <div class="accordion_head">Third Accordian Head<span class="plusminus">+</span></div> <div class="accordion_body" style="display: none;"> <p>Third Accordian Body, it will have description</p> </div> </div>

Answer 1

使用字體真棒圖標或材料圖標或使用其他一些圖標來實現這一點。 在這里，我使用了fa圖標來實現這一點

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

並稍作修改 jquery。 使用$(".plusminus > i").removeClass('fa-angle-up').addClass('fa-angle-down'); 而不是$(this).children(".plusminus").text('+'); 並使用$(this).find(".plusminus > i").removeClass('fa-angle-down').addClass('fa-angle-up'); 而不是$(this).children(".plusminus").text('-');

 $(document).ready(function() { $(".accordion_head").click(function() { if ($('.accordion_body').is(':visible')) { $(".accordion_body").slideUp(300); $(".plusminus > i").removeClass('fa-angle-up').addClass('fa-angle-down'); } if ($(this).next(".accordion_body").is(':visible')) { $(this).next(".accordion_body").slideUp(300); $(this).find(".plusminus > i").removeClass('fa-angle-up').addClass('fa-angle-down'); } else { $(this).next(".accordion_body").slideDown(300); $(this).find(".plusminus > i").removeClass('fa-angle-down').addClass('fa-angle-up'); } }); });

 .accordion_head { /* background-color: skyblue; */ color: #1D5AA6; cursor: pointer; border-bottom: 1px solid #f3f3f3; padding: 2rem; }.accordion_body { background: lightgray; }.accordion_body p { padding: 18px 5px; margin: 0px; }.plusminus { float: right; }

 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="accordion_container"> <h3 class="accordion_head"> First Accordian Body, it will have Header <span class="plusminus"><i class='fa fa-angle-up' style='font-size:36px'></i></span></h3> <div class="accordion_body" > <p>First Accordian Body, it will have description</p> </div> <div class="accordion_head">Second Accordian Head<span class="plusminus"><i class='fa fa-angle-down' style='font-size:36px'></i></span></div> <div class="accordion_body" style="display: none;"> <p>Second Accordian Body, it will have description</p> </div> <div class="accordion_head">Third Accordian Head<span class="plusminus"><i class='fa fa-angle-down' style='font-size:36px'></i></span></div> <div class="accordion_body" style="display: none;"> <p>Third Accordian Body, it will have description</p> </div> </div>