0

嗨，我是网络编程的新手（仅限网络！）所以请温柔一点。我正在尝试使用引导程序构建示例应用程序。我的兴趣是导航栏，我希望能够在悬停时在导航链接上拥有下拉菜单。更具体地说，我需要导航链接像往常一样运行（显示选项卡内容，例如单击时的某些页面），但在悬停时显示下拉菜单。我现在不能有展位 'data-toggle="tab"' 和 'data-toggle="dropdown"' 可以吗？感谢这个网站，我设法完成了悬停部分：但我一直停留在显示下拉菜单上，一些链接或示例会很棒。提前致谢。

我的 HTML 代码：

<div class="container">    <!------- Container start --------->
    <div class="row">
        <div class="span12">
            <div class="navbar">
                <div class="navbar-inner">
                    <a class="brand span2" href="#">Title</a>
                    <ul class="nav">
                        <li class="divider-vertical"></li>
                        <li class="active"><a id="nav_callcen"  href="#t_link1" data-toggle="tab">Link1</a></li>
                        <li class="divider-vertical"></li>
                        <li><a href="#t_link2" data-toggle="tab">Link2</a></li>
                        <li class="divider-vertical"></li>
                        <li><a href="#t_link3" data-toggle="tab">Link3</a></li>
                        <li class="divider-vertical"></li>
                        <li class ="dropdown">
                            <a class="dropdown-toggle" data-toggle="dropdown" href="#t_link4" >Link4*</a>
                                <ul class="dropdown-menu" >
                                    <li><a id="link1" tabindex="-1" href="#">Link1</a></li>
                                    <li><a id="link2" tabindex="-1" href="#">Link2</a></li>
                                </ul>
                        </li>
                     </ul>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="span12">
            <div id="appContent" class="tab-content">

                <div class="tab-pane active" id="t_link1">
                    <p>This is Link1</p>
                </div>   
                <div class="tab-pane" id="t_link2">
                    <p>This is Link2</p>
                </div>    
                <div class="tab-pane" id="t_link3">
                    <p>This is Link3</p>
                </div>    
                <div class="tab-pane" id="t_link4">
                    <p>This is Link4</p>
                </div>    

            </div>
        </div>
    </div>          

</div> <!------- Container end --------->

CSS：

ul.nav li.dropdown:hover > ul.dropdown-menu{
    margin: 0;
    display: block;    
}

a.menu:after, .dropdown-toggle:after {
  content: none;
}

JS：

$('.dropdown').on('click', 'li', function(event) {
        $("a[href=#t_"+event.target.id+"]").tab('show');
});
4

0 回答 0