使用 Jquery 切换 div 时如何更改图标 - 和 +？

Question

我正在尝试在 HTML 中编写一个部分，您可以在其中单击 div 它将展开其内容，而其他 div 将 toggle/hide。这就是我所拥有的，并且运行良好：

如果我单击 Personaliza 标题，它将展开其内容和 toggle/hide 其他两个标题。

查看第三部分的网站：https://uniformaguatemalapruebas.herokuapp.com/

我试图在 div 被选中或展开时添加一个图标 -，而其他两个将显示 + 图标。如果我单击任何标题，它将显示 +，其他标题将显示 -。如果 none 展开，它们都会显示 +.

我的问题很简单，但我正在为此苦苦挣扎。

这是我目前拥有的：

    <section id="about-us">
   <div class="container">
      <div class="row">
         <div class="col-6 col-12-narrower  ">
            <div class="quienes-somos contr">
               <div class="container-aboutus">
                  <!-- <div>
                     <p class="title-h5">
                        "Lo más importante no es destacar, 
                        <br/>
                        es ser recordado"
                     </p>
                     </div> -->
                  <div class="title-big">
                     <h2>¿Quiénes somos?</h2>
                  </div>
                  <div class="hr-aboutus"></div>
                  <div id="aboutus-texts">
                     <div class="uniforma-text">
                        <div class="main-title">
                           <h4>Unifica
                              <span><i class="fas fa-minus iconshow" style="float: right; margin-right: 1em;"></i></span>   
                           </h4>
                        </div>
                        <div class="item" id="active-item">
                           <p>
                              Uniforma Guatemala es una empresa 100% Guatemalteca con experiencia en la industria de la confección de uniformes. Lo conformamos un equipo de colaboradores con más de dos décadas de experiencia, lo que nos permite el criterio adecuado para la correcta asesoría en cuanto a imagen y materias primas.
                              Estamos altamente capacitados para la buena atención a nuestros clientes y comprometidos a mantener altos estándares en la fabricación de Uniformes.
                              Ofrecemos a nuestros clientes soluciones integrales y MODA.
                           </p>
                        </div>
                     </div>
                     <div class="uniforma-text">
                        <div class="main-title">
                           <h4>Personaliza</h4>
                        </div>
                        <div class="item">
                           <p>
                              Sabemos que las empresas son el motor de la economía y que día a día requieren de mejoras en su imagen para integrarse a las nuevas exigencias de un mercado cambiante y competitivo.
                              Conocemos de moda y tendencias por eso diseñamos nuestros Uniformes dándoles un toque personal e innovador para cada institución.
                              Ofrecemos soluciones completas y que se adapten a las necesidades específicas.
                           </p>
                        </div>
                     </div>
                     <div class="uniforma-text">
                        <div class="main-title">
                           <h4>Identifica</h4>
                        </div>
                        <div class="item">
                           <p>
                              Sabemos que la imagen y seguridad de los trabajadores debe estar respaldada por la calidad de los Uniformes, por lo que mantenemos altos estándares en la fabricación por producto, esto nos permite garantizar todas nuestras prendas.
                              Costuras pequeñas y reforzadas para su alta durabilidad y comodidad en el ambiente laboral.
                              Todas nuestras prendas tienen garantía contra defecto de fabricación.
                           </p>
                        </div>
                     </div>
                  </div>
                  <div class="contact-button-aboutus">
                     <button class="button danger">
                     <span>Contactar</span>
                     </button>
                  </div>
               </div>
            </div>
         </div>
         <div class="col-6 col-12-narrower uniforma-main-image-tr">
            <div class="quienes-somos">
               <div class="image featured">
                  <h1>
                     <img src="/images/esta133.jpeg" alt="para-quien-hace-de-su-labor-una-pasion-dia-con-dia"/>
                  </h1>
               </div>
            </div>
         </div>
      </div>
   </div>
</section>

Javascript:

// toggle on the first title when page loads
$('#aboutus-texts .uniforma-text .item p').hide();
$('#active-item p').toggle();

//if I click any title it will expand itself and toggle off others.
$('#aboutus-texts .uniforma-text .main-title ').click(function(e){
e.preventDefault();
var block = $(this).parent().find('p');
$("#aboutus-texts .uniforma-text .item p").not(block).hide();
block.toggle(200);
});

PD：我正在为图标使用 Font awesome。

Answer 1

也许你可以试试这个

// toggle on the first title when page loads
$('#aboutus-texts .uniforma-text .item p').hide();
$('#active-item p').toggle();

const setIcon = (icon, show) => {
  if (show) {
    icon.removeClass("fa-plus");
    icon.addClass("fa-minus");
  } else {
    icon.removeClass("fa-minus");
    icon.addClass("fa-plus");  
  }
}

$('#aboutus-texts .uniforma-text .main-title ').click(function(e) {
  const block = $(this).parent().find('p');
  const icon = $(this).find(".iconshow");
  setIcon(icon, icon.hasClass("fa-plus"));
  $("#aboutus-texts .uniforma-text .item p").not(block).hide();
  $("#aboutus-texts .uniforma-text .item p").not(block).each((i, item) => {
    const icon = $(item).parent().parent().find(".iconshow");
    setIcon(icon, false);
  });
  block.toggle();
});

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha256-4+XzXVhsDmqanXGHaHvgh1gMQKX40OUvDEBTu8JcmNs=" crossorigin="anonymous"></script>
<section id="about-us">
  <div class="container">
    <div class="row">
      <div class="col-6 col-12-narrower  ">
        <div class="quienes-somos contr">
          <div class="container-aboutus">
            <!-- <div>
                     <p class="title-h5">
                        "Lo más importante no es destacar, 
                        <br/>
                        es ser recordado"
                     </p>
                     </div> -->
            <div class="title-big">
              <h2>¿Quiénes somos?</h2>
            </div>
            <div class="hr-aboutus"></div>
            <div id="aboutus-texts">
              <div class="uniforma-text">
                <div class="main-title">
                  <h4>Unifica
                    <span><i class="fas fa-minus iconshow" style="float: right; margin-right: 1em;"></i></span>
                  </h4>
                </div>
                <div class="item" id="active-item">
                  <p>
                    Uniforma Guatemala es una empresa 100% Guatemalteca con experiencia en la industria de la confección de uniformes. Lo conformamos un equipo de colaboradores con más de dos décadas de experiencia, lo que nos permite el criterio adecuado para la correcta asesoría en cuanto a imagen y materias primas.
                    Estamos altamente capacitados para la buena atención a nuestros clientes y comprometidos a mantener altos estándares en la fabricación de Uniformes.
                    Ofrecemos a nuestros clientes soluciones integrales y MODA.
                  </p>
                </div>
              </div>
              <div class="uniforma-text">
                <div class="main-title">
                  <h4>Personaliza
                    <span><i class="fas fa-plus iconshow" style="float: right; margin-right: 1em;"></i></span>
                  </h4>
                </div>
                <div class="item">
                  <p>
                    Sabemos que las empresas son el motor de la economía y que día a día requieren de mejoras en su imagen para integrarse a las nuevas exigencias de un mercado cambiante y competitivo.
                    Conocemos de moda y tendencias por eso diseñamos nuestros Uniformes dándoles un toque personal e innovador para cada institución.
                    Ofrecemos soluciones completas y que se adapten a las necesidades específicas.
                  </p>
                </div>
              </div>
              <div class="uniforma-text">
                <div class="main-title">
                  <h4>Identifica
                    <span><i class="fas fa-plus iconshow" style="float: right; margin-right: 1em;"></i></span>
                  </h4>
                </div>
                <div class="item">
                  <p>
                    Sabemos que la imagen y seguridad de los trabajadores debe estar respaldada por la calidad de los Uniformes, por lo que mantenemos altos estándares en la fabricación por producto, esto nos permite garantizar todas nuestras prendas.
                    Costuras pequeñas y reforzadas para su alta durabilidad y comodidad en el ambiente laboral.
                    Todas nuestras prendas tienen garantía contra defecto de fabricación.
                  </p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

使用 Jquery 切换 div 时如何更改图标 - 和 +？

How to change icons - and + when toggling divs using Jquery?

html

javascript

jquery

font-awesome