Como fazer para percorrer todo o DOM e achar um determinado elemento em jQuery?
Quero, ao clicar na li
de classe="home"
, abrir a div
de classe="submenu"
.
<body class="home">
<!-- Header -->
<div class="wrap-header">
<div class="row">
<div class="area-logo-responsive hide-for-large-up small-12 medium-12 columns">
<a href="index.php/home"><h1><img src="img/theme/logo-responsive.png" title="Openweb " alt="Openweb " /></h1></a>
</div>
</div>
<!-- Row do Menu e do Logo -->
<div class="row">
<div class="large-3 columns show-for-large-up">
<div class="area-logo">
<a href="index.php/home"><h1><img src="img/theme/logo-openweb.png" title="Openweb " alt="Openweb " /></h1></a>
</div>
</div>
<div class="small-12 medium-12 large-9 columns">
<div class="area-menu hide-for-medium-only hide-for-small-only">
<ul class="menu">
<li menu="home" class="home"><a href="#">Home</a></li>
<li><a href="#">Produtos e Serviços</a></li>
<li><a href="#">Central do Cliente</a></li>
<li><a href="#">Sobre a Openweb</a></li>
<li class="last"><a href="#">Contato</a></li>
<li class="login"><span class="lock"></span><a href="#">Login</a>
<div class="wrap-login show-for-large-up">
<div class="area-login">
<?php include('include-area-login.php'); ?>
</div>
</div>
</li>
</ul>
</div>
<div class="area-menu-response hide-for-large-up">
<button class="btn-home">Produtos e Serviços</button>
<button class="btn-more">Menu <span>▽</span></button>
<div class="clear"></div>
<div class="menu-hided-left">
<ul>
<li><a href="#">Hospedagem de Sites</a></li>
<li><a href="#">Servidores Linux</a></li>
<li><a href="#">Facilitta Mail Marketing</a></li>
<li><a href="#">Google Adwords</a></li>
<li><a href="#">Instalação de Blog</a></li>
</ul>
</div>
<div class="menu-hided">
<ul>
<li><a href="#">Home</a></li>
<li class="btn-submenu" ><a href="javascript:void(0);">Central do Cliente +</a>
<ul class="mais-submenu">
<li><a href="#">item 1</a></li>
<li><a href="#">item 2</a></li>
<li><a href="#">item 3</a></li>
<li><a href="#">item 4</a></li>
</ul>
</li>
<li class="btn-submenu"><a href="javascript:void(0);">Sobre a Openweb +</a>
<ul class="mais-submenu">
<li><a href="#">item 1</a></li>
<li><a href="#">item 2</a></li>
<li><a href="#">item 3</a></li>
<li><a href="#">item 4</a></li>
</ul>
</li>
<li><a href="#">Contato</a></li>
<li><a href="#">Login</a></li>
</ul>
</div>
</div>
</div>
</div><!-- Fecha Row da Header -->
</div><!-- Fecha Wrap-Header -->
<!-- Wrap-Drop Menu Header -->
<div class="wrap-menu">
<div class="row">
<div class="submenu show-for-large-up large-12 columns">
<ul>
<li><a href="#">Hospedagem de Sites</a></li>
<li><a href="#">Servidores Linux</a></li>
<li><a href="#">Facilitta Mail Marketing</a></li>
<li><a href="#">Google Adwords</a></li>
<li><a href="#">Instalação de Blog</a></li>
</ul>
</div>
</div><!-- Fecha Row do Menu-->
</div><!-- Fecha Wrap Menu -->
$("#id_do_menu").onclick(function () { //open div });
?$('seletor-para-achar-sua-div')
e pronto (qualquer travessia do DOM que seja necessária o jQuery faz por você).