0

所以首先，这是我网站的链接： http: //songfreek.com/

这就是我的侧边栏下拉导航正在做的事情：

这就是我希望我的侧边栏下拉导航执行的操作：

如果不是很明显，我想我会解释一下：我只希望“用户”选项卡在页面加载时自动开始打开，而不是全部打开。

这是代码（每个选项卡都重复，只是内容不同）：

`<li class="nav-header has_submenu">
                            <a href="#">
                                User <i class="icon-angle-down"></i>
                            </a>
                            <ul style="list-style: none;">
                                <li class="active"><a href="#"><i class="icon-home"></i>Home</a></li>
                                <li><a href="#"><i class="icon-envelope-alt"></i>Messages <span class="badge badge-info">4</span></a></li>
                                <li><a href="#"><i class="icon-cogs"></i>Settings</a></li>
                                <li><a href="#"><i class="icon-comment"></i>Shoutbox</a></li>
                                <li><a href="#"><i class="icon-user"></i>Staff List</a></li>
                                <li><a href="#"><i class="icon-flag"></i>My Infractions</a></li>
                                <li><a href="#"><i class="icon-exclamation-sign"></i>Rules & Regulations</a></li>
                                <li><a href="#"><i class="icon-off"></i>Logout</a></li>
                            </ul>
                        </li>`

那么我可以更改代码以使其加载打开或关闭？

4

1 回答 1

0

您可以使用 Bootstrapdata-toggle="collapse"来切换菜单。每个菜单UL都有class="collapse"一个唯一的 ID，可以分配给data-target切换菜单的链接属性...

用于class="collapse in"首先打开用户菜单。

<li class="nav-header">
  <a href="#" data-toggle="collapse" data-target="#userMenu">
    User <i class="icon-angle-down"></i>
  </a>
  <ul style="list-style: none;" class="collapse in" id="userMenu">
    <li class="active"><a href="#"><i class="icon-home"></i>Home</a></li>
    <li><a href="#"><i class="icon-envelope-alt"></i>Messages <span class="badge badge-info">4</span></a></li>
    <li><a href="#"><i class="icon-cogs"></i>Settings</a></li>
    <li><a href="#"><i class="icon-comment"></i>Shoutbox</a></li>
    <li><a href="#"><i class="icon-user"></i>Staff List</a></li>
    <li><a href="#"><i class="icon-flag"></i>My Infractions</a></li>
    <li><a href="#"><i class="icon-exclamation-sign"></i>Rules &amp; Regulations</a></li>
    <li><a href="#"><i class="icon-off"></i>Logout</a></li>
  </ul>
</li>
<li class="nav-header">
  <a href="#" data-toggle="collapse" data-target="#radioDJMenu">
    Radio DJ <i class="icon-angle-down"></i>
  </a>
  <ul style="list-style: none;" class="collapse" id="radioDJMenu">
    <li><a href="#">Information &amp; Stats</a></li>
    <li><a href="#">DJ Says</a></li>

    .
    .
    .

演示

于 2013-05-19T09:28:16.423 回答