jQuery UI acordeón, cómo poner un botón/enlace a la tubería principal con otra función

Question

estoy realmente conseguir loco por este tema y yo estaría contento de conseguir un poco de ayuda poco de usted.

Tengo un acordeón jQuery que está funcionando bien. Me gusta poner una X en la esquina derecha del encabezado, que luego elimina el elemento de la lista, pero no puedo hacer eso. El encabezado está dentro de una etiqueta <h3><a> HEADER </a></h3. esto es abrir el contenido. Cuando coloco otro enlace al encabezado, el acordeón no se muestra correctamente. ¿Existe la posibilidad de poner otro enlace/botón, y si el usuario hace clic en él puedo atraparlo y eliminarlo?

Probé con otro método, puse el botón en un div en el contenido e intenté moverlo a la parte superior en la posición: relativa y -20px, pero no se muestra, se sobrescribe desde el encabezado, aunque configuré el Z-INDEX a un valor más alto.

suena como una cosa muy fácil, y tal vez me haya perdido algo ... pero pasé tantas horas en esto ahora y han buscado tantos sitios, pero no fue capaz de resolverlo. Cualquier ayuda sería apreciada.

Gracias, Marcel

Answer 1

Esto ayuda a que ponga UI-botón en la cabecera de IU-acordeón, sin interferir de eventos:

$("#accordion").accordion({ header: "> div > .h3" }); 
$("#check").button(); 
$("#check-label").click(function(event){ 
    event.stopPropagation(); // this is 
    event.preventDefault(); // the magic 
    log("clicked!"); 
}); 

<div id="accordion"> 
    <div> 
     <div class="h3"> 
      <div class="right-button"> 
       <input type="checkbox" id="check" /><label for="check" id="check-label"></label> 
      </div> 
      <a href="#">First</a> 
     </div> 
     <div> 
      <p>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</p> 

     </div> 
    </div> 
    <div> 
     <div class="h3"> 
      <a href="#">Second</a> 
     </div> 
     <div>Phasellus mattis tincidunt nibh.</div> 
    </div> 
    <div> 
     <div class="h3"> 
      <a href="#">Third</a> 
     </div> 
     <div>Nam dui erat, auctor a, dignissim quis.</div> 
    </div> 
</div> 

Answer 2

un puesto más viejo, pero para aquellos que buscan, esto es lo que terminó haciendo es la creación de un bloque dentro del encabezado h3. Luego agregué la clase llamada barra de herramientas al bloque. Luego usó el selector de jquery para obtener todos los anclajes dentro de los bloques con la clase de barra de herramientas y enlazar el evento click de cada uno. Dentro del evento click, utilicé el atributo href de elementos actuales para establecer el valor window.location para forzar el navegador a la página a la que quería navegar. En este caso, es una página de edición y eliminación.

<div id="accordion"> 
    <h3>Header 1 
    <span style="float:right;" class="toolbar ui-widget-header ui-corner-all"> 
    <a href="/EditPage.html">Edit</a> 
    <a href="/DeletePage.html">Delete</a> 
    </span> 
    </h3> 
    <div> 
    Content 1 
    </div> 
    <h3>Header 2 
    <span style="float:right;" class="toolbar ui-widget-header ui-corner-all"> 
    <a href="/EditPage.html">Edit</a> 
    <a href="/DeletePage.html">Delete</a> 
    </span> 
    </h3> 
    <div> 
    Content 2 
    </div> 
</div> 

<script type="text/javascript"> 
$("#accordion").accordion(); 

$(".toolbar a").live("click", function() { 
    window.location($(this).attr("href")); 
}); 
</script> 

Answer 3

Es posible que las otras respuestas funcionen en algún momento, y pueden haber funcionado en ciertas circunstancias.

que he encontrado en cambio que funciona a utilizar una combinación de los dos enfoques, con jQuery moderna y Javascript. Donde me he puesto en un conjunto de enlaces en una lista de ofertas de trabajo, y los enlaces están todos en la clase 'applyNowLink':

$(".applyNowLink").on("click", null, null, function(event) { 
     window.location.href = $(this).attr("href"); 
     event.preventDefault(); 
}); 

funciona para mí. No impedir la acción por defecto causado dos ventanas de correo electrónico para abrir (el href es un mailto:)