jQuery acordeón: prevenir panel de apertura/cancelar evento changestart

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> 

puedo crear 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 alguna 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 todavía 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

Encontré una solución alternativa que funciona en mi contexto - evito tener que cancelar el evento por completo simplemente desactivando los encabezados H3 (después de darles un id) 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 2

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

funciona para mí.

Answer 3

He archivado una solicitud de mejora para esto: Ticket 6651.

Answer 4

Antes de iniciar el acordeón, agregue su controlador de clic personalizado con su lógica. stopImmediatePropagation detendrá el evento antes de llamar 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 no existe una respuesta similar por user438316, tiene mucho código innecesario, return false ser una obvia discordante ... ¿qué hay de justo:

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

Answer 6

que 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 fue desencadenar un cambio de acordeón después de arrastrar cuando los encabezados son el controlador tanto para acordeón como para 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 7

Voy a crear el contenido de acordeón de forma dinámica, por lo que la llamada unión evento antes de generar el acordeón no está funcionando para mí. Así que probé vinculando el stopImmediatePropagation después de crear el acordeón y eso funcionó para mí.

Answer 8

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

Consulte jsFiddle-accordion

Answer 9

Es un par de años después de la pregunta fue hecha originalmente y estoy usando jQuery-UI 1.11.2 así que esto no podría haber sido una respuesta válida a continuación.

Pero esto es lo que he encontrado para trabajar mejor:

1. En primer lugar dar la cabecera desea desactivar el identificador de disable_this, o encontrar alguna otra manera se puede seleccionar el encabezado correspondiente (s).

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()) trabajó para mí en el sentido limitado de que se impidió la apertura del panel cuando la se hizo clic en el encabezado. Pero mi método tiene 2 beneficios adicionales:

• Detiene la toma del encabezado en un estilo resaltado cuando se hace clic.

• Da al encabezado un estilo deshabilitado.

Mucho más fácil de usar.

Answer 10

Quizás esté disponible en jQueryUIs antiguas, pero si usa jQuery-UI 1.9.2 o posterior, puede desactivar el colapso del acordeón en el evento BeforeActivate;

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