2010-11-30 4 views
1

спасибо Nick Craver У меня есть хорошее меню для переключения, однако у меня возникла проблема, что если пользователи будут нажимать новые меню, страница будет продолжайте расти, чего я не хочу, поэтому идея такова:jQuery toggle menu hide/show (закрыть другие меню при открытии нового меню)

как открывается одно меню, любые открытые в настоящее время меню.

Полный источник @http://the-dot.co.uk/new/

здесь 2 фрагменты кода я использую.

и HTML структура

<ul class="navigation"> 
    <li><a name="us" title="us">Us</a></li> 
    <li id="us">about thedot</li> 
    <li><a name="portfolio" title="portfolio">Portfolio</a></li> 
    <li></li> 
    <li><a name="contact" title="contact">Contact</a></li> 
    <li id="contact">contact deets 
    </li> 
    <li><a name="twitter" title="twitter">Twitter</a></li> 
    <li id="twit">some twitter shit</li> 
    <li><a href="#">Blog</a></li> 
    </ul> 

спасибо.

+0

В чем вопрос? – 2010-11-30 23:33:02

+0

1-й n-й абзац объясняет проблему и то, что я хочу :) – Owen 2010-11-30 23:33:58

ответ

5

Вы можете сделать что-то вроде этого:

$(function() { 
    $("ul li a").click(function() { 
     $(this).parent().next().toggle("fast").siblings("[id]").hide("fast"); 
    }); 
}); 

You can test it out here, что это делает его переключения родственный <li> еще, но потом смотрит на его.siblings(), которые имеют атрибут ID и .hide() их, если шоу.


Если разметка не заблокирована, вы могли бы упростить его дальше, как это:

<ul class="navigation"> 
    <li class="toggle">Us</li> 
    <li class="content">about thedot</li> 
    <li class="toggle">Portfolio</li> 
    <li class="content"></li> 
    <li class="toggle">Contact</li> 
    <li class="content">contact deets</li> 
    <li class="toggle">Twitter</li> 
    <li class="content">some twitter shit</li> 
    <li><a href="#">Blog</a></li> 
</ul> 

И сценарий вроде этого:

$(function() { 
    $("li.content").hide(); 
    $("ul.navigation").delegate("li.toggle", "click", function() { 
     $(this).next().toggle("fast").siblings(".content").hide("fast"); 
    }); 
}); 

Это вопрос предпочтений, но Я нахожу этот подход немного более чистым и более стильным, check out the result here.

Смежные вопросы