bootstrap下拉列表中的子菜单选项卡

时间:2015-02-28 01:21:46

标签: jquery twitter-bootstrap jquery-ui twitter-bootstrap-3 navbar

我正在开发一个bootstrap导航栏。请找到附带的原型。一切都按预期工作。我想在标签中打开子菜单。谁能提出一些关于如何进行的想法?悬停时会打开下拉列表。

<nav class="navbar navbar-default" role="navigation">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse-1">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
        </div>

        <div class="collapse navbar-collapse" id="navbar-collapse-1">
          <div class="container">
            <ul class="nav navbar-nav">

                <li data-omni_link="x1" id="xyz" ><a href="#" class="role-link"><span class=""><i class="icon "></i></span><span data-omni_data="tile_position:1" class="">Nav1</span></a></li>
                <li data-omni_link="x2" id="abc" ><a href="#" class="role-link"><span class=""><i class="icon"></i></span><span data-omni_data="tile_position:2" class="">Nav2</span></a></li>

                <li class="dropdown middle-button" id="fgh">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown"><span class=""><i class="icon "></i></span><span data-omni_data="tile_position:4" class="">Nav3<b class="caret"></b></span></a> 
                    <ul class="dropdown-menu">
                        <li class="kopie"><a href="#">Dropdown2</a></li>
                        <li><a href="#">Dropdown2 Link 1</a></li>
                        <li><a href="#">Dropdown2 Link 2</a></li>
                        <li><a href="#">Dropdown2 Link 3</a></li>

                        <li class="dropdown dropdown-submenu"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown2 Link 4</a>
                            <ul class="dropdown-menu">
                                <li class="kopie"><a href="#">Dropdown2 Link 4</a></li>
                                <li><a href="#">Dropdown2 Submenu Link 4.1</a></li>
                                <li><a href="#">Dropdown2 Submenu Link 4.2</a></li>
                                <li><a href="#">Dropdown2 Submenu Link 4.3</a></li>
                                <li><a href="#">Dropdown2 Submenu Link 4.4</a></li>

                            </ul>
                        </li>
                        <li class="dropdown dropdown-submenu"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown2 Link 5</a>
                            <ul class="dropdown-menu">
                                <li class="kopie"><a href="#">Dropdown Link 5</a></li>
                                <li><a href="#">Dropdown2 Submenu Link 5.1</a></li>
                                <li><a href="#">Dropdown2 Submenu Link 5.2</a></li>
                                <li><a href="#">Dropdown2 Submenu Link 5.3</a></li>
                                <li class="dropdown dropdown-submenu"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown Submenu Link 5.4</a>
                                    <ul class="dropdown-menu">
                                        <li class="kopie"><a href="#">Dropdown2 Submenu Link 5.4</a></li>
                                        <li><a href="#">Dropdown2 Submenu Link 5.4.1</a></li>
                                        <li><a href="#">Dropdown2 Submenu Link 5.4.2</a></li>

                                    </ul>
                                </li>                                  
                            </ul>
                        </li>                                  
                    </ul>
                </li>
             <li data-omni_link="rww" id="AD">
             <span class="">NAV4 </span><input maxlength="5" data-storage="" data-omni_data="tile_position:6, link_name:" type="text" id=""><button class="unstyled" data-omni_data="link_name:zip_code_edit" id=""><i class="icon icon-pencil"></i><i class="icon icon-arrow-r"></i></button>
          </li>
            </ul>
          </div>
        </div><!-- /.navbar-collapse -->
    </nav>

0 个答案:

没有答案