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 に答える