Question

你好我是网络编程的新手（只有网络！）所以请温柔。我正在尝试使用bootstrap构建一个示例应用程序。我感兴趣的是在navbar中我希望能够在悬停时在导航链接上有下拉菜单。更具体地说，我需要导航链接以像往常一样运行（显示标签内容，例如点击时的某个页面），但下拉菜单显示何时悬停。我不能把展位'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');
});

导航栏导航链接上的bootstrap下拉菜单

0 个答案: