He seguido algunos tutoriales y, a continuación, crea un simple widget de acordeón, funciona muy bien como se puede ver en este el violín

Sin embargo, estoy tratando de agregar una flecha hacia abajo, cuando la sección se cierra y una flecha superior cuando la sección está abierta en el extremo derecho de la cabeza de cada ficha en el acordeón, tal como muestra la imagen de abajo:

Alternar flechas arriba y abajo en un simple widget de acordeón
Aquí se las flechas códigos fuente:

.icon-arrowUp:before {
   content: "\f077";
}
.icon-arrowDown:before {
   content: "\f078";
}

Aquí es lo que he intentado, he añadido la flecha por defecto mediante el uso de CSS:

.accordian .accordian-head:before {
        font-family: 'icons';
        content: "\f078";
        float: right;
    }

Esto se sumó la flecha muy bien, sin embargo ahora lo quiero para sustituir a la flecha con el alza de uno, cuando la sección está abierta, no tengo ni idea de qué hacer! He intentado añadir el siguiente CSS y alternar con JavaScript, pero no funcionó:

.accordian .accordian-head .accordian-head-active:before {
        font-family: 'icons';
        content: "\f077";
        background-color: red;
    }


//Accordian
    $('.accordion').each(function () {
        var $accordian = $(this);
        $accordian.find('.accordion-head').on('click', function () {
            $accordian.find('.accordion-body').slideUp();
            if (!$(this).next().is(':visible')) {
                $(this).next().slideDown();
                $(this).addClass('accordian-head-active');
            }
        });
    });
  • AQUÍ es algo para jugar con
  • esto funcionó! pero cómo se puede reemplazar con mis flechas? Yo no puedo hacerlo… he intentado añadir los códigos, pero simplemente no lo hará. Por favor, consejos
  • Si usted mira .accordion .accordion-head span estilo vas a ver la background-image que he usado para. Comprobar y cambiar en consecuencia a lo que te gustaría.
  • Sólo traté de: jsfiddle.net/x5hPR
  • He intentado algo como: $acordeón.find(‘.acordeón de cabeza’).css(«:antes de»,’\f078′)
InformationsquelleAutor Leo | 2014-04-14

2 Comentarios

  1. 5

    Tengo uso de CSS border – Flecha

    JS

    $('.accordion').each(function () {
            var $accordian = $(this);
            $accordian.find('.accordion-head').on('click', function () {
                $accordian.find('.accordion-body').slideUp();
                if (!$(this).next().is(':visible')) {
                    $(this).next().slideDown();
                       $('h4 span',this).text("Up Arrow");
                }else{
                    $('h4 span',this).text("Down Arrow");
                }
            });
        });

    añadido CSS

    .arrow {
        float: right;
        width: 0px;
        height: 0px;
        margin-top: 23px;
        border: 10px solid transparent;
        margin-top: 21px;
        border-top-color: #F3F3F3;
    }
    .accordion-head.open .arrow {
        margin-top: 11px;
        border-bottom-color: #F3F3F3;
        border-top-color: transparent;
    }

    DEMO AQUÍ

    DEMO 2

    • Uno de los problemas tho, al abrir una sección y, a continuación, haga clic y abrir otra, la flecha en el anterior no cambia de nuevo, es permanecer abierto.
    • Se preguntó sólo para cambiar las flechas de todos modos me he fijado esta ahora. verificar este enlace
    • Esto funciona para mí hasta que yo agregue un gran cuerpo de texto a la <div class="accordion-body">. Cuando hago eso, el acordeón «cuadros» de la primavera se abre como se esperaba, pero la parte superior de la «caja» (donde un lector puede esperar para empezar a leer) puede ser, bien fuera de la pantalla. ¿Cómo podemos arreglar esto para que el accordion-body div que es solicitado por el usuario es llevado a la parte superior de la zona de enfoque?
  2. 0

    He hecho una simple JQuery solución para conseguir este trabajo. Estoy seguro que usted puede perfeccionar, pero al menos va en la dirección correcta.

    En la Cabeza, H4 he añadido un span con la «flecha de texto»

    <h4>Section A<span>Down Arrow</span></h4>

    ..Cambiar el css para el lapso para flotar a la derecha

    .accordion .accordion-head span {
        float:right
    }

    y, finalmente, añade un poco de JQuery para cambiar el texto

    ...   
    if (!$(this).next().is(':visible')) {
    $(this).next().slideDown();
        $('h4 span',this).text("Up Arrow");
    }else{
        $('h4 span',this).text("Down Arrow");
    }
    ...

    JSFiddle

    • Uno de los problemas tho, al abrir una sección y, a continuación, haga clic y abrir otra, la flecha en el anterior no cambia de nuevo, es permanecer abierto.

Dejar respuesta

Please enter your comment!
Please enter your name here