example - Acordeón jQuery: evita que el panel abra/cancele el evento changestart

jqueryui com download

Question

Tengo el siguiente marcado:

<div id="accordion" class="leftaligned">
    <div>
        <h3><a href="#">Stakeholder</a></h3>
        <div>Content</div>
    </div>
    <div>
        <h3><a href="#">Relationships</a></h3>
        <div>Blah blah</div>
    </div>
    <div>
        <h3><a href="#">Address</a></h3>
        <div>Yada yada</div>
    </div>
    <div>
        <h3><a href="#">Contact Details</a></h3>
        <div>Foo bar</div>
    </div>
</div>

Creo un acordeón de la siguiente manera:

$("#accordion").accordion({
    header: "h3",
    fillSpace: true,
    changestart: function(event, ui) {
        if (someConditionIsTrue()) {
            event.stopPropagation();
            event.preventDefault();
            return (false);
        }
    }
});

La idea es que hay algunos casos de uso que evitarían que el usuario cambie los paneles, sin embargo, la anulación anterior del evento no tiene ningún efecto y los paneles aún se pueden cambiar.

¿Hay alguna manera de evitar el cambio de paneles? También traté de activar el panel actual programáticamente para evitar el cambio, pero eso desencadena otro evento changestart y todo el infierno se desata (el acordeón realmente se rompe)

Answer 1

Necesitaba una derivación de este comportamiento porque estaba encadenando draggable y acordeón. Estoy poniendo mi solución aquí para cualquiera que busque la misma solución.

El comportamiento que estaba tratando de evitar estaba provocando un cambio de acordeón después de arrastrar cuando los encabezados son el controlador tanto del acordeón como del que se puede arrastrar. Entonces, cada vez que arrastra, colapsa la sección de contenido actualmente expandida.

HTML:

var $container = (''<div id="accordion">'');
var $content = (''<div>'');
$content.append(
    ''<h1>Header 1</h1>'' +
    ''<div>Content 1</div>'' +
    ''<h1>Header 2</div>'' +
    ''<div>Content 2</div>''
);

JS:

$container.append($controls)
.draggable({
    handle: '':header'',
    start: function(event, ui) {
        $(event.toElement).addClass(''ui-dragging'');
    }

});
$container.find('':header'').click(function (event) {
    var $this = $(this);
    if ($(this).hasClass(''ui-dragging'')) {
        event.stopImmediatePropagation();
        $this.removeClass(''ui-dragging'');
    }
});
$container.accordion({
    collapsible: true,
    header: '':header''
});

Answer 2

Presenté una solicitud de mejora para esto: Ticket 6651 .

Answer 3

Encontré una solución alternativa que funciona en mi contexto: evito tener que cancelar el evento por completo simplemente deshabilitando los encabezados h3 (después de darles una identificación) cuando sea necesario:

html:

<div>
    <h3 id="relationshipsHeader"><a href="#">Relationships</a></h3>
    <div>Blah blah</div>
</div>

guión:

if (someConditionIsTrue()) {
    $("#relationshipsHeader").attr("disabled", "disabled");
    // and so on...
}

Answer 4

Antes de iniciar el acordeón, agregue su manejador de clic personalizado con su lógica. stopImmediatePropagation detendrá el evento antes de que se llame al controlador de acordeón.

$(''.quiz-qa h3'').click(function(e) {      
  if ($(this).hasClass("deleted")) {
    e.stopImmediatePropagation();
    return false;      
   }   
});    
$(''.quiz-qa'').accordion();

Answer 5

Aunque hay una respuesta similar por user438316, tiene demasiado código innecesario, return false es un obvio discordante ... ¿qué tal simplemente:

$(''#accordion .deleted'').click(function(e) {      
    e.stopImmediatePropagation();
});    
$(''#accordion'').accordion();

Answer 6

Estoy creando dinámicamente los contenidos de acordeón, por lo que vincular la llamada de evento antes de que se genere el acordeón no me funciona. Así que probé vinculando el stopImmediatePropagation después de crear el acordeón y eso funcionó para mí.

Answer 7

$("#accordion .h3").unbind("click");

funciona para mi.

Answer 8

$("#accordion h3").unbind("click");

Consulte jsFiddle-acordeón

Answer 9

Han pasado unos años desde que se formuló originalmente la pregunta y estoy usando jQuery-UI 1.11.2, por lo que esta podría no haber sido una respuesta válida.

Pero esto es lo que encontré para trabajar mejor:

1. Primero, proporcione el encabezado que desea deshabilitar la identificación disable_this , o busque de alguna otra manera que pueda seleccionar los encabezados relevantes.

2. A continuación, agregue esta línea de código

   $(''h3#disable_this'').addClass(''ui-state-disabled'');

Algunos de los métodos mencionados en las respuestas anteriores ( unbind("click") y e.stopImmediatePropogation() ) me funcionaron en el sentido limitado de que impidieron la apertura del panel cuando se hizo clic en el encabezado. Pero mi método tiene 2 beneficios adicionales:

• Detiene el encabezado tomando un estilo resaltado cuando se hace clic.

• Le da al encabezado un estilo deshabilitado.

Mucho más fácil de usar.

Answer 10

Tal vez esté disponible en jQueryUIs más antiguas, pero si usas jQuery-UI 1.9.2 o posterior, puedes desactivar el colapso del acordeón en el evento BeforeActivate;

beforeActivate: function (event, ui) {
    event.preventDefault();
}