Utilizar el método next (), nextAll () y sus hermanos

next (), nextAll () y hermanos método usando:

next (): Obtiene el siguiente elemento de hermanos puede ser elementos que se indican inmediatamente;

nextAll (): el acceso a todos los hermanos después de que el elemento especificado;

hermanos (): Obtiene los elementos especificados Pueden todos los hermanos.

prev (): la obtención de un conjunto de elementos de cada elemento del hermano inmediatamente anterior contiene un conjunto de elementos emparejados.

preAll (): Encuentra todos los hermanos antes de que el elemento actual

parent (): contiene todos los elementos para obtener un único elementos elemento padre a juego de la colección.

niños: Obtiene el elemento hijo del elemento especificado, con selectores de sub-elementos.

encontrar (): Obtiene los elementos elemento descendientes especificados, con selectores de descendientes.

 

Ejemplo: para lograr menú plegable

// slideUp () para ocultar, slideDown () para mostrar 

// el código principal

<script> 
    $ (function () { 
        $ () ocultar () "menu_body. ";. 
        $ (), haga clic en (function () {" menu_head.". 
            $ (this) .A continuación () slideDown (.), 
            $ ( esto) .css ( "color", "blanco"); 
            .. (este) .parent () $ (hermanos) niños () slideUp () "menu_body.";. 
            $ (this) .parent () hermanos (. ) .children ( "menu_head "). css (" color", "# 475052") 
        }) 
    }) 
</ script>

<Ul class = "menu_list"> 
    <li> 
        <la clase p = "menu_head"> <objetivos de gestión / el p> 
        <div class = "menu_body"> 
            <a href="#"> espacio tema </a> 
            <a href = "#"> tarea del proyecto </a> 
            <a href="#"> plan de trabajo </a> 
            <a href="#"> los eventos del calendario </a> 
            <a href="#"> vista del tiempo < / a> 
        </ div> 
    </ li> 
    <li> 
        <p clase = "menu_head"> gestión de reuniones </ p-> 
        <div class = "menu_body"> 
            <a href="#"> tema del espacio </a> 
            <a href="#">Calendario de sesiones </a> 
            <a href="#"> estar conferencia abierta </a> 
            <a href="#"> ha abierto la reunión </a> 
            <a href="#"> recursos de conferencia </a> 
        </ div> 
    </ li> 
    <li>
        <P class = "menu_head"> comunidad de conocimiento </ p-> 
        <div class = "menu_body"> 
            <a href="#"> Favoritos </a> 
            <a href="#"> conocimiento Plaza </ a > 
            <a href="#"> documentación del Centro de </a> 
            <a href="#"> mi blog </a> 
            <a href="#"> gestión de biblioteca de documentos </a> 
        </ div> 
    < / li> 
    <li> 
        <p clase = "menu_head"> mis herramientas </ p-> 
        <div class = "menu_body"> 
            <a href="#"> investigación exhaustiva </a> 
            <a href = "#" > Contactos </a> 
            <a href="#"> notas </a>
            <a href="#">计算器</a> 
            <a href="#">万年历</a> 
            <a href="#">常用链接</a> 
        </ div> 
    </ li> 
< / ul>