bootstrap下拉菜单像页面一样展开

时间:2015-07-08 09:12:04

标签: jquery css twitter-bootstrap

我有一个大清单,我想在下拉菜单中显示它们。由于数量很大,菜单可以扩展到右边而不是仅垂直列表。你知道任何jquery插件可以使用吗?

我的要求是这样的,当点击下拉菜单时会显示一个弹出窗口或菜单:

A C E A1 C1 E1 A2 C2 E2 A3 C3 E3 B D F B1 D1 F1 B2 D2 F2 B3 D3 F3

1 个答案:

答案 0 :(得分:0)

嗯......我想你需要的是一个MegaMenu。但就目前而言,你走了:

<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<header>
  <nav>
    <ul>
      <li class="open">
        <a href="">Item 1</a>
        <ul>
          <li><a href="">Sub Item 1</a></li>
          <li><a href="">Sub Item 2</a></li>
          <li><a href="">Sub Item 3</a></li>
          <li><a href="">Sub Item 4</a></li>
          <li><a href="">Sub Item 5</a></li>
          <li><a href="">Sub Item 6</a></li>
          <li><a href="">Sub Item 7</a></li>
          <li><a href="">Sub Item 8</a></li>
          <li><a href="">Sub Item 9</a></li>
          <li><a href="">Sub Item 10</a></li>
        </ul>
      </li>
      <li>
        <a href="">Item 2</a>
        <ul>
          <li><a href="">Sub Item 1</a></li>
          <li><a href="">Sub Item 2</a></li>
          <li><a href="">Sub Item 3</a></li>
          <li><a href="">Sub Item 4</a></li>
          <li><a href="">Sub Item 5</a></li>
          <li><a href="">Sub Item 6</a></li>
          <li><a href="">Sub Item 7</a></li>
          <li><a href="">Sub Item 8</a></li>
          <li><a href="">Sub Item 9</a></li>
          <li><a href="">Sub Item 10</a></li>
        </ul>
      </li>
      <li>
        <a href="">Item 3</a>
        <ul>
          <li><a href="">Sub Item 1</a></li>
          <li><a href="">Sub Item 2</a></li>
          <li><a href="">Sub Item 3</a></li>
          <li><a href="">Sub Item 4</a></li>
          <li><a href="">Sub Item 5</a></li>
          <li><a href="">Sub Item 6</a></li>
          <li><a href="">Sub Item 7</a></li>
          <li><a href="">Sub Item 8</a></li>
          <li><a href="">Sub Item 9</a></li>
          <li><a href="">Sub Item 10</a></li>
        </ul>
      </li>
      <li>
        <a href="">Item 4</a>
        <ul>
          <li><a href="">Sub Item 1</a></li>
          <li><a href="">Sub Item 2</a></li>
          <li><a href="">Sub Item 3</a></li>
          <li><a href="">Sub Item 4</a></li>
          <li><a href="">Sub Item 5</a></li>
          <li><a href="">Sub Item 6</a></li>
          <li><a href="">Sub Item 7</a></li>
          <li><a href="">Sub Item 8</a></li>
          <li><a href="">Sub Item 9</a></li>
          <li><a href="">Sub Item 10</a></li>
        </ul>
      </li>
      <li>
        <a href="">Item 5</a>
        <ul>
          <li><a href="">Sub Item 1</a></li>
          <li><a href="">Sub Item 2</a></li>
          <li><a href="">Sub Item 3</a></li>
          <li><a href="">Sub Item 4</a></li>
          <li><a href="">Sub Item 5</a></li>
          <li><a href="">Sub Item 6</a></li>
          <li><a href="">Sub Item 7</a></li>
          <li><a href="">Sub Item 8</a></li>
          <li><a href="">Sub Item 9</a></li>
          <li><a href="">Sub Item 10</a></li>
        </ul>
      </li>
    </ul>
  </nav>
</header>
<ul>

根据您的需要,您可以在内部<div>内部拥有任何内容。我刚试过这个。您可以尝试使用string str = "fnGetDate('d',-1+ cint(cbool(DatePart('w',Date())<=2)) + cint(cbool(DatePart('w',Date())=2)))"; int parLevel = 0; List<string> arguments = new List<string>(); string currentString = String.Empty; foreach (char t in str) { switch (t) { case '(': if (t == '(') parLevel++; currentString += t; if (parLevel == 1) { arguments.Add(currentString); currentString = String.Empty; } break; case ')': if (t == ')') parLevel--; if (parLevel > 0) currentString += t; break; case ',': if (parLevel == 1) { arguments.Add(currentString); currentString = String.Empty; } else currentString += t; break; default: currentString += t; break; } } if (!String.IsNullOrEmpty(currentString)) arguments.Add(currentString); for (int i = 0; i < arguments.Count; i++) Console.WriteLine("Argument {0}: {1}", i, arguments[i]); 并相应地更改内容。