Configuración de la sección activa en acordeón

Estoy tratando de establecer una sección activa dentro de mi acordeón. Estoy teniendo muchas dificultades para descubrir cómo hacer esto. He buscado incansablemente, y no he encontrado solución a mi caso concreto. Parece muy sencillo, pero no puedo entenderlo. ¡por favor ayuda!

(Mi intención es poner esta lista en la página maestra y hacer que cada página de contenido establezca la sección activa cuando se navegue).

He guardado mi lista de acordeón en jsFiddle: http://jsfiddle.net/pWbxm/14/

** lista alternativa de acordeón en jsFiddle, que usa el formato div/header: http://jsfiddle.net/hemiar/44UTR/

html:

<ul class="leftNavMenu">
    <li><a href="#" title="#">Home</a></li>
        <li><a href="#" title="#">HR + Benefits</a>
            <ul>
                <li><a href="#">HR Main</a></li>
                <li><a href="#">Policies</a></li>
                <li><a href="#">Benefits</a></li>
                <li><a href="#">Forms</a></li>
                <li><a href="#">Employee Handbook</a></li>
                <li><a href="#">Managers</a></li>    
            </ul>
        </li>    
        <li><a href="#" title="#">Departments</a> 
            <ul>
                <li><a href="#">Accounting</a>  
                <ul>
                <li><a href="#">Accounting Main</a></li>
                <li><a href="#">Draft Dates</a></li>
                <li><a href="#">Forms</a></li>
                <li><a href="#">InfoSend</a></li>
            </ul>
        </li>  
        <li><a href="#">Acquisitions</a> 
            <ul>
                <li><a href="#">Acquisitions Main</a></li>
                <li><a href="#">Bulk Acquisitions</a></li>
                <li><a href="#">Dealer Program Acquisitions</a></li>
                <li><a href="#">Training Manual</a></li>
            </ul>
        </li>   
        </ul>
    </li>
    <li><a href="#" title="#">Contacts</a> 
        <ul>
            <li><a href="#">Contacts Home</a></li>
            <li><a href="#">SAFE Phone List</a></li>
            <li><a href="#">CSAI Phone List</a></li>
            <li><a href="#">DND Codes</a></li>
            <li><a href="#">Phone User Guides</a></li>    
        </ul>
    </li>
</ul>

CSS:

.leftNavMenu{width: 195px;}

ul.leftNavMenu{line-height: 0.5em;}

ul.leftNavMenu ul{
    margin: 0;
    padding: 0;
    display: none;}

ul.leftNavMenu li{
    list-style: none;
    font-size:10px;font-weight:bold;
    color:#1D65B3;
    border-bottom:inset;
    border-width:1px;
    border-bottom-color:#BDD1E6;}

ul.leftNavMenu li a{
    line-height: 10px;
    padding: 10px 5px 5px 10px;
    display: block;}

ul.leftNavMenu li a:hover{
    background-color:#ffffff;
    color:#1D65B3;}

ul.leftNavMenu ul li{
    margin: 0;
    padding: 0;
    clear: both;
    font-family:Verdana, "Segoe UI";
    font-size:9px;font-weight:bold;
    background-color:#D5E6F8;
    color:#ffffff;}

ul.leftNavMenu ul li a{
    padding-left: 15px;
    outline:0;}

ul.leftNavMenu ul li a:hover{
    background-color:#ffffff;
    color:#1D65B3;}

ul.leftNavMenu ul ul li{    
    background-color:#ffffff;
    color:#1D65B3;
    border-bottom-style:dotted;}

ul.leftNavMenu ul ul li a{
    font-size:9px;font-weight:normal;
    padding-left: 30px;}

ul.leftNavMenu ul ul li a:hover{
    background-color:#E8EFF7;
    color:#1D65B3;}

ul.leftNavMenu span{
    float:right;}

JScript

     $(document).ready(function() {
        $('li').click(function(ev) {
            $(this).find('>ul').slideToggle('slow')
                .end().siblings().find('ul').slideUp('slow');
            ev.stopPropagation();
        });
    });
    var accordion = $('ul.leftNavMenu');
    accordion.accordion('activate', 2);

preguntado el 03 de mayo de 12 a las 17:05

¿Ha buscado en la consola JS mensajes de error? -

Hans... Sí, miré y no hay errores en la lista. La página carga bien sin ningún error, pero no activa ninguna sección. ¿Podría ser que mis secciones tengan que estar etiquetadas de alguna manera o debo hacer referencia a las secciones de una manera diferente? Aprecio tu ayuda. -

Su jsFiddle produce "Error de tipo no capturado: el objeto [objeto Objeto] no tiene método 'acordeón'" en la consola JS cuando se ejecuta. Me parece que está tratando de usar la función de acordeón de JQuery UI pero no ha liderado las dependencias necesarias. -

Olvidé seleccionar el marco de jQuery UI (he actualizado la URL de jfiddle arriba), es por eso que estabas obteniendo el typeError. Lo he solucionado, pero el problema sigue siendo, por supuesto. Seguiré buscando una respuesta a mi problema. Realmente aprecio su respuesta y cualquier otra ayuda. -

2 Respuestas

El jQuery UI Accordion está diseñado para funcionar con el HTML que se muestra en la documentación. No creo que funcione con <ul><li> las etiquetas.

Tal vez debería considerar volver a escribir su html para usar su marcado. p.ej

<div id="accordion">
    <h3><a href="#section1">Section 1</a></h3>
    <div>
        <p>Mauris mauris ante, blandit et, ultrices a, susceros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.</p>
    </div>
    <h3><a href="#section2">Section 2</a></h3>
    <div>
        More Content Here
    </div>
</div>

contestado el 04 de mayo de 12 a las 22:05

Intenté usar el formato de etiqueta div/header ilustrado en la documentación de la interfaz de usuario, y conseguí que funcionara en el segundo nivel del menú, pero necesito tres niveles. el tercer menú simplemente no aparecerá. Lo he estado intentando, de manera frustrante, durante los últimos 2 días, y estoy a punto de romperme. Estaría eternamente agradecido a cualquiera que pudiera decirme definitivamente si es posible activar un panel usando un formato ul/li, y si no, publique un ejemplo de un formato div/header simple de 3 capas que funcione. Gracias a todos. También agregué el jsFiddle de mi progreso usando el formato div/header a mi publicación anterior. - Hemiar

Parece que esta pregunta se ha dejado abierta desde hace un par de años. Pude hacer que funcionara en el menú de navegación terciario usando las etiquetas div y header, pero no con las etiquetas ul. Parece que solo reconocerá el primer y segundo nivel en una lista ul.

Respondido 15 Feb 14, 04:02

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.