Вопрос меню боковой навигации - PullRequest
Новая
       1

Вопрос меню боковой навигации

1 голос
/ 18 августа 2010

Как я могу свернуть и развернуть все мои вложенные списки при нажатии.

Вот мой xHTML. 

<ul>
   <li><a href="some-link.php">First Nested List</a></li>
   <li><a href="some-link.php">First Nested List</a></li>
   <li><a href="some-link.php">First Nested List</a>
      <ul>
        <li><a href="some-link.php">Second Nested List</a></li>
        <li><a href="some-link.php">Second Nested List</a></li>
        <li><a href="some-link.php">Second Nested List</a>
          <ul>
            <li><a href="some-link.php">Third Nested List</a></li>
            <li><a href="some-link.php">Third Nested List</a></li>
            <li><a href="some-link.php">Third Nested List</a>
              <ul>
                <li><a href="some-link.php">Fourth Nested List</a></li>
                <li><a href="some-link.php">Fourth Nested List</a></li>
                <li><a href="some-link.php">Fourth Nested List</a></li>
              </ul>
            </li>
            <li><a href="some-link.php">Third Nested List</a></li>
            <li><a href="some-link.php">Third Nested List</a></li>
          </ul>
        </li>
        <li><a href="some-link.php">Second Nested List</a></li>
        <li><a href="some-link.php">Second Nested List</a></li>
      </ul>
    </li>
   <li><a href="some-link.php">First Nested List</a></li>
   <li><a href="some-link.php">First Nested List</a></li>
</ul>

Ответы [ 3 ]

4 голосов
/ 18 августа 2010

Я не уверен точно что вы ищете, но общая концепция выглядит следующим образом: 

$("li").click(function(e) {
  $(this).children('ul').toggle(400); //toggle the immediate child <ul>
  return false;  //stop the click from bubbling up, and the href working
});

Вы можете попробовать его с разметкой здесь .

1 голос
/ 18 августа 2010

Этот плагин jQuery может быть тем, что вы ищете: http://docs.jquery.com/Plugins/Treeview

Ваш код будет выглядеть примерно так ... 

<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  <link rel="stylesheet" href="http://dev.jquery.com/view/trunk/plugins/treeview/demo/screen.css" type="text/css" />
  <link rel="stylesheet" href="http://dev.jquery.com/view/trunk/plugins/treeview/jquery.treeview.css" type="text/css" />
  <script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/treeview/jquery.treeview.js"></script>
  <script>
  $(document).ready(function(){
    $("#example").treeview();
  });
  </script>

</head>
<body>
<ul id="example" class="filetree">
   <li><a href="some-link.php">First Nested List</a></li>
   <li><a href="some-link.php">First Nested List</a></li>
   <li><a href="some-link.php">First Nested List</a>
      <ul>
        <li><a href="some-link.php">Second Nested List</a></li>
        <li><a href="some-link.php">Second Nested List</a></li>
        <li><a href="some-link.php">Second Nested List</a>
          <ul>
            <li><a href="some-link.php">Third Nested List</a></li>
            <li><a href="some-link.php">Third Nested List</a></li>
            <li><a href="some-link.php">Third Nested List</a>
              <ul>
                <li><a href="some-link.php">Fourth Nested List</a></li>
                <li><a href="some-link.php">Fourth Nested List</a></li>
                <li><a href="some-link.php">Fourth Nested List</a></li>
              </ul>
            </li>
            <li><a href="some-link.php">Third Nested List</a></li>
            <li><a href="some-link.php">Third Nested List</a></li>
          </ul>
        </li>
        <li><a href="some-link.php">Second Nested List</a></li>
        <li><a href="some-link.php">Second Nested List</a></li>
      </ul>
    </li>
   <li><a href="some-link.php">First Nested List</a></li>
   <li><a href="some-link.php">First Nested List</a></li>
</ul>
</body>
</html>

В зависимости откакой класс вы называете в родительском теге <ul>, посмотрите на эти демонстрации и выберите тот, который вам больше нравится: http://view.jquery.com/trunk/plugins/treeview/demo/

0 голосов
/ 18 августа 2010

Подобно другим идеям, я набросал что-то вроде этого как черновик: 

            $(".nav ul").hide();
            $(".nav li").click(function(){
                if ($(this).children("ul").length > 0) {
                    $(this).children("ul").toggle();
                    return false;
                }
                return true;
            });

В моем примере я добавил класс nav к самому внешнему ul, чтобы избежать конфликта с другими возможными ссылками на странице: 

        <ul class="nav">
   <li><a href="some-link.php">First Nested List</a></li>
   <li><a href="some-link.php">First Nested List</a></li>
   <li><a href="some-link.php">First Nested List</a>
      <ul>
        <li><a href="some-link.php">Second Nested List</a></li>
        <li><a href="some-link.php">Second Nested List</a></li>
        <li><a href="some-link.php">Second Nested List</a>
          <ul>
            <li><a href="some-link.php">Third Nested List</a></li>
            <li><a href="some-link.php">Third Nested List</a></li>
            <li><a href="some-link.php">Third Nested List</a>
              <ul>
                <li><a href="some-link.php">Fourth Nested List</a></li>
                <li><a href="some-link.php">Fourth Nested List</a></li>
                <li><a href="some-link.php">Fourth Nested List</a></li>
              </ul>
            </li>
            <li><a href="some-link.php">Third Nested List</a></li>
            <li><a href="some-link.php">Third Nested List</a></li>
          </ul>
        </li>
        <li><a href="some-link.php">Second Nested List</a></li>
        <li><a href="some-link.php">Second Nested List</a></li>
      </ul>
    </li>
   <li><a href="some-link.php">First Nested List</a></li>
   <li><a href="some-link.php">First Nested List</a></li>
</ul>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...