jquery - right - navbar-fixed-top
Moviendo múltiples padres en jQuery, ¿una forma más eficiente? (5)
Entonces, tengo una navegación que es una lista y tiene sublistas y sublistas.
Básicamente, el navegador está colapsado por defecto, pero si las personas hacen clic en una página que está en una sublista, quiero mostrar la lista principal. Y si es una sublista de una sublista, necesito que se muestren ambas listas principales. Lo tengo configurado, pero no me gusta poner 5 .parent (). Parent () para recorrer hacia arriba para expandir la lista. ¿Hay una manera más eficiente?
el HTML:
<div id="lesson-sidebar">
<ul>
<li><a href="index.html">Welcome to Beat Basics and Beyond</a></li>
<li><a href="table-of-contents.html">What''s in this course?</a></li>
<li><a href="defining-your-beat.html" class="active">Defining Your Beat</a>
<ul>
<li><a href="boundaries-of-your-beat.html">Boundaries of Your Beat</a></li>
<li><a href="the-beat-description.html">The Beat Description</a></li>
<li><a href="build-your-own-beat-description.html"><span class="ital">Activity:</span> Build Your Own Beat Description</a></li>
</ul>
</li>
<li><a href="getting-started.html">Getting Started</a>
<ul>
<li><a href="debrief-your-predecessor.html">Debrief Your Predecessor</a></li>
<li><a href="predecessor-top-five-tips.html"><span class="ital">Activity:</span> List The Top Five Tips From Your Predecessor</a></li>
<li><a href="covering-your-beat-with-the-internet.html">Covering Your Beat With The Internet</a></li>
<li><a href="get-in-the-car-and-go.html">Get in the Car and Go</a></li>
<li><a href="mapping-your-beat.html">Mapping Your Beat</a></li>
<li><a href="read-the-clips.html">Read the Clips</a></li>
<li><a href="activity-dissect-this-clip.html"><span class="ital">Activity:</span> Dissect This Clip</a></li>
<li><a href="writing-your-first-article.html">Writing Your First Article</a></li>
<li><a href="starting-cold-on-the-beat.html">Starting Cold on the Beat</a></li>
</ul>
</li>
<li><a href="working-with-sources.html">Working With Sources</a>
<ul>
<li><a href="finding-sources.html">Finding Sources</a></li>
<li><a href="diversify-your-sources.html">Diversify Your Sources</a></li>
<li><a href="prospecting-for-stories-and-sources.html">Prospecting for Stories and Sources</a></li>
<li><a href="building-relationships.html">Building Relationships</a></li>
<li><a href="going-off-the-record.html">Going Off the Record</a></li>
</ul>
</li>
<li><a href="developing-resources.html">Developing Resources to Help You on the Beat</a>
<ul>
<li><a href="develop-a-calendar-of-events.html">Develop a Calendar of Events</a></li>
<li><a href="build-your-library.html">Build Your Library</a></li>
<li><a href="learn-the-open-record-laws.html">Learn the Open Record Laws</a></li>
</ul>
</li>
<li><a href="extra-resources.html">Extra Resources</a>
<ul>
<li><a href="beat-breakdown-tool.html">Beat Breakdown Tool</a></li>
<li><a href="links-library.html">Links Library</a>
<ul>
<li><a href="general-resources-for-any-beat.html">General Resources for Any Beat</a></li>
<li><a href="courts-and-criminal-justice-links.html">Courts and Criminal Justice Links</a></li>
<li><a href="education-resources.html">Education Resources</a></li>
<li><a href="local-government-links.html">Local Government Links</a></li>
<li><a href="neighborhood-or-suburban-links.html">Neighborhood or Suburban Links</a></li>
<li><a href="police-and-public-safety-links.html">Police and Public Safety Links</a></li>
<li><a href="reporter-organizations.html">Reporter Organizations</a></li>
</ul>
</li>
<li><a href="additional-reading.html">Additional Reading</a></li>
</ul>
</li>
<li><a href="final-thoughts.html">Final Thoughts</a></li>
</ul>
El jQuery:
function toggleSubmenu() {
if ($(this).hasClass(''submenu-hidden'')) {
$(this).parent().children(''ul'').slideToggle();
$(this).removeClass().addClass(''submenu-visible'');
} else if ($(this).hasClass(''submenu-visible'')) {
$(this).parent().children(''ul'').slideToggle();
$(this).removeClass().addClass(''submenu-hidden'');
}
}
$(''#lesson-sidebar ul ul'').hide();
$(''#lesson-sidebar ul ul ul'').hide();
$(''#lesson-sidebar ul:first-child'').attr(''id'', ''rootlist'');
$(''#lesson-sidebar ul li:has("ul")'').prepend(''<span class="submenu-hidden"></span>'').css(''list-style'',''none'');
$(''#lesson-sidebar ul li a'').each(
function() {
if ($(this).hasClass(''active'')) {
// if it is a UL
var length = $(this).parent().find("ul").length;
alert(length);
if (length == 0) {
if ($(this).parent().parent().parent().children(''span'').hasClass(''submenu-hidden'')) {
$(this).parent().parent().parent().children(''ul'').show();
$(this).parent().parent().parent().children(''span'').removeClass(''submenu-hidden'').addClass(''submenu-visible'');
}
if ($(this).parent().parent().parent().parent().parent().children(''span'').hasClass(''submenu-hidden'')) {
$(this).parent().parent().parent().parent().parent().children(''ul'').show();
$(this).parent().parent().parent().parent().parent().children(''span'').removeClass(''submenu-hidden'').addClass(''submenu-visible'');
}
}
if (length == 1) {
$(this).parent().find(''ul'').slideToggle();
$(this).parent().children(''span'').removeClass(''submenu-hidden'').addClass(''submenu-visible'');
}
}
}
);
$(''ul#rootlist > li span, ul#rootlist li ul li > span'').bind(''click'', toggleSubmenu);
Cualquier y toda ayuda es muy apreciada.
Para simplificar la respuesta muy útil de Lance McNeary, el truco es usar:
.parents([selector])
Dado un objeto jQuery que representa un conjunto de elementos DOM, el método .parents () nos permite buscar a través de los ancestros de estos elementos en el árbol DOM y construir un nuevo objeto jQuery a partir de los elementos coincidentes ordenados desde el padre inmediato en adelante; los elementos se devuelven en orden desde el padre más cercano a los externos.
Otro usuario sugirió:
.closest([selector])
Similar a .parents (), esta puede ser una mejor opción, ya que se detiene una vez que encuentra el elemento que está buscando. Parece que sería más eficiente en este caso. Consulte http://api.jquery.com/closest/ para obtener más detalles. Espero que esto ayude a las personas a entender las diferencias entre .closest () y .parents () y cuán poderoso y flexible puede ser jQuery.
Pruebe con esta línea de código:
$(this).parent().parent().fadeOut();
Si entiendo lo que intentas hacer ... puedes hacer algo como esto:
// For my benefit, hide all lists except the root items
$(''ul, li'', $(''#lesson-sidebar ul li'')).hide();
// Show active parents and their siblings
$(''li a.active'').parents(''ul, li'').each(function() {
$(this).siblings().andSelf().show();
});
// Show the active item and its siblings
$(''li a.active'').siblings().andSelf().show();
Los métodos de los padres () y los hermanos () son geniales para este tipo de cosas.
Editar: Hubo un error antes de que no mostrara a los hermanos principales. Prueba esta nueva versión.
Editar 2: ahora funciona con class = "active" en el ancla en lugar del elemento de la lista.
$(this).closest("ul") atravesará a los padres hasta que encuentre un ul
http://docs.jquery.com/Traversing/closest#expr
... obtener el primer elemento que coincida con el selector probando el elemento en sí y recorriendo sus antepasados en el árbol DOM ...
$(this).parents().get()[4] te dará el quinto