скрыть все видимые <ul>при нажатии на родительский <li> - PullRequest
Новая
       52

скрыть все видимые <ul>при нажатии на родительский <li>

0 голосов
/ 07 сентября 2010

Добрый вечер

У меня есть базовая структура ul, li и вложенных выпадающих меню в форме ul. Я пытаюсь сделать так, чтобы при щелчке по родительскому li появился дочерний элемент ul. При повторном щелчке по li ребенок скрывается.

Так вот, что я получил до сих пор 

$(document).ready(function() {
        $("ul#glass-buttons li").toggle(function() {
            $("ul", this).show();
        },
        function () {
            $("ul", this).hide();
        });
    });

Работает отлично, единственная проблема в том, что есть несколько дочерних выпадающих меню. Поэтому, когда один из них открыт, и я щелкаю другого родителя li, оба дочерних ul остаются открытыми и перекрываются. Кто-нибудь может порекомендовать лучший способ, которым я могу скрыть все видимые ul, когда они больше не нужны.

Кроме того, что будет лучшим способом скрыть любую открытую ul, когда пользователь щелкает в любом месте документа?

Большое спасибо заранее. =]

Ответы [ 4 ]

1 голос
/ 07 сентября 2010

Я не мог понять, как это сделать с помощью переключателя.Ваши потребности могут быть слишком специализированными, чтобы вы могли эффективно использовать тумблер.Вот оно с кликом. 

<html>
  <head>
    <script type="text/javascript" src="http://www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.load("jquery", "1");
    </script>
    <script>
      function hide_sub_navs() {
        $('.top_level ul').hide().removeClass("shown");
      }

      $(function() {
        hide_sub_navs();
        $(".top_level").click(function(event) {
          event.stopPropagation();
          var clicked = this;
          var sub_menu = $(clicked).find("ul");
          if (sub_menu.hasClass("shown")) {
            sub_menu.hide().removeClass("shown");
          } else {
            sub_menu.show().addClass("shown");
            $(".top_level").each(function() {
              var next_li = this;
              if (next_li != clicked) {
                $(next_li).find("ul").hide().removeClass("shown");
              }
            });
          }
        });
        $(window).click(hide_sub_navs);
      });
    </script>
  </head>
  <body>
    <ul>
      <li class="top_level">top level 1
        <ul>
          <li>Sub level 1</li>
        </ul>
      </li>
      <li class="top_level">top level 2
        <ul>
          <li>Sub level 2</li>
        </ul>
      </li>
    </ul>
  </body>
</html>

Редактировать

Изменено

$ ('body'). Click (hide_sub_navs);

до

$ (окно) .click (hide_sub_navs);

Если у вас нет содержимого на странице, тег body становится коротким, и вы не можете нажать наЭто.Если вы запустили старое решение на реальной веб-странице, оно, вероятно, сработало бы, потому что у вас, вероятно, было бы другое содержимое, поддерживающее тег body.В любом случае, похоже, что окно работает лучше.

0 голосов
/ 07 сентября 2010 
$(this).children('ul').hide();

Это должно скрыть все теги, которые встречают 'ul', которые являются прямыми потомками $(this).

Если это не поможет, можем ли мы увидеть сам HTML?У вас может быть что-то еще в HTML, которое настроено не так, как мы ожидаем.

Увидел вторую часть вашего вопроса.

Назначьте класс всем детямтеги 'ul' у вас есть в nav.В моем примере я буду использовать .dropdown

$('.dropdown').hide();
$(this).children('.dropdown').show();

Это будет скрывать КАЖДЫЙ ul с классом .dropdown, а затем он покажет всех детей первого уровня с классом .dropdown.

0 голосов
/ 07 сентября 2010

Я думаю, что <ul> вложено внутри <li>.

На вопрос, как закрыть все видимые ul при щелчке снаружи: 

// close list on click outside
$('body').click(function() {
  $('ul:visible').each(function() {
    $(this).toggle();
  });
});

возможно, выследует добавить класс в "sub-ul", чтобы верхний родитель не был скрыт.

0 голосов
/ 07 сентября 2010

Вы пробовали альтернативные способы получить UL, которые хотите скрыть? Любой из них может работать: 

$(this).children('ul').hide()

$(this).find('ul').hide()

Первый для, если UL является прямым потомком LI, второй для, если они могут быть вложены дальше.

Кроме того, если вы хотите скрыть все видимые UL (будьте осторожны, вы можете скрыть тот, на котором они щелкнули), это будет соответствовать всем видимым: 

$('ul:visible')
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...