Tengo el siguiente código html:

   <div id="menu">

        <h3><span class="panel-icon">+</span> Slide up/down</h3>
        <span class="panel">
        <p>Now you see me!</p>
        </span>

        <h3><span class="panel-icon">+</span> Slide Up/Down</h3>
        <span class="panel">
        <p>Now you see me!</p>
        </span>

    </div>

y yo uso el acordeón función de jQuery para abrir y cerrar el contenido debajo de cada encabezado:

$(document).ready(function(){
  $("#menu").accordion({collapsible: true, active: false, animate: 500,});
});

El acordeón en sí funciona perfectamente.
Sin embargo, no sé cómo puedo swich entre un más y un menos el icono de la base de si el contenido se muestra o no.

Pensé que el código podría ser algo como esto:

$(document).ready(fucntion(){

  if ((".panel") == visibility = collapse) {
  $(".panel-icon").html("-");
  }
  else if ((".panel1") == visibility = hidden){
  $(".panel-icon").html("+");   
  }

});

o tal vez algo similar a la de esta manera:

$(document).ready(function(){
        $('.panel-icon').text(function(_, txt) {
        return txt === "+" ? "-" : "+";
        });
});

Soy muy nuevo en el jQuery de programación, así que espero que usted me puede ayudar.
Gracias 🙂

InformationsquelleAutor Michi | 2015-07-05

3 Comentarios

  1. 3

    Intentar utitlizing click evento delegada para h3.ui-accordion-header ; recorrer h3.ui-accordion-header elementos con .each() , si el elemento tiene class .ui-state-active conjunto .panel-icon de texto a "-" , otro conjunto de .panel-icon de texto a "+"

    JS:

    $(document).ready(function() {
      $("#menu").accordion({
        collapsible: true,
        active: false,
        animate: 500
      }).on("click", "h3.ui-accordion-header", function(e) {
        $("h3.ui-accordion-header").each(function(i, el) {
         $(this).find(".panel-icon").text($(el).is(".ui-state-active") ? "-" : "+")
        })
      });
    
    });

    HTML:

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <link href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet" />
    <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
    
    <div id="menu">
    
      <h3><span class="panel-icon">+</span> Slide up/down</h3>
      <span class="panel">
            <p>Now you see me!</p>
            </span>
    
      <h3><span class="panel-icon">+</span> Slide Up/Down</h3>
      <span class="panel">
            <p>Now you see me!</p>
            </span>
    
    </div>

    • Funciona como un encanto, Gracias
  2. 3

    Debe utilizar JQueryUI con iconos personalizados. Usted puede encontrar en el siguiente enlace:
    http://jqueryui.com/accordion/#custom-icons

    Por favor, también echa un vistazo a esta pregunta podría ser de ayuda:
    Cómo personalizar el más/menos de interfaz de usuario jQuery accordion imágenes

    $(function() {
    var icons = {
      header: "ui-icon-circle-arrow-e",
      activeHeader: "ui-icon-circle-arrow-s"
    };
    $( "#accordion" ).accordion({
      icons: icons
    });
    $( "#toggle" ).button().click(function() {
      if ( $( "#accordion" ).accordion( "option", "icons" ) ) {
        $( "#accordion" ).accordion( "option", "icons", null );
      } else {
        $( "#accordion" ).accordion( "option", "icons", icons );
      }
    }); });

    Personalizar el encabezado de iconos con los iconos de opción, que acepta las clases para el encabezado predeterminado y activo (abierto) del estado. El uso de cualquier clase de la interfaz de usuario framework CSS, o crear clases personalizadas con imágenes de fondo.

  3. 0

    Debe utilizar css para tus iconos y jquery para su funcionalidad. Usted no necesita jquery-ui para agregar y quitar iconos. Si ya lo están haciendo, a continuación, justo lo suficiente, pero para los del futuro, aquí es una buena solución con sólo JQuery y css.

    Ver el jsfiddle aquí para ver un ejemplo

    openCloseButton.removeClass('is-closed').addClass('is-open');

    El ejemplo esxpands esto en un ejemplo de trabajo, es simplificado y he usado el color de fondo para denotar abierto y cerrado de estado como no tengo los iconos a la mano, pero se puede ver cómo el JQuery alterna una clase css que define el estilo de tu apertura y cierre de botones.

    Los beneficios de hacerlo como este son los que mantienen el estilo en el css, que es donde pertenece. Esto hace que sea mucho más fácil en el futuro para cambiar el icono, tal vez a puro css, o un sprite. También hace que sea más fácil para volver a usar los estilos de otros lugares sin necesidad de JQuery.

Dejar respuesta

Please enter your comment!
Please enter your name here