jQuery переключатель меню скрыть / показать (закрыть другие меню при открытии нового меню) - PullRequest
Новая
       18

jQuery переключатель меню скрыть / показать (закрыть другие меню при открытии нового меню)

1 голос
/ 01 декабря 2010

благодаря Ника Крейвера У меня есть хорошее меню переключения, однако я столкнулся с проблемой, что если пользователи будут продолжать нажимать на новые меню, страница будет продолжать расти, чего я не хочу, поэтомуИдея такова:

при открытии одного меню, закрытие любых открытых в данный момент меню.

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

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

<script type="text/javascript">
$(document).ready(function() {
$("ul li a").click(function() { $(this).parent().next().toggle("fast"); });
});
</script>

и структура 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>

спасибо.

1 Ответ

5 голосов
/ 01 декабря 2010

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

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

Вы можете проверить это здесь , что это делает, он все еще переключает брата <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");
  });
});

Это вопрос предпочтений, но я нахожу этот подход немного чище и более стильным, посмотрите результат здесь .

...