Question

我设计了一个可折叠的菜单，可以在调整浏览器大小时隐藏，并且在切换按钮时也必须显示相同的菜单。

在切换按钮中，我使用了glyphicon-humberger。相反，我想在切换按钮中显示所选菜单。

<div class="container-fluid">
    <div class="navbar-header">
        <button id="button" type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
            <i class="glyphicon glyphicon-menu-hamburger"></i>                  
        </button>
        <a class="navbar-brand"><img src="sample.png"></a> 
        <div>
            <h4>DIRECTORY</h4>
        </div>
    </div>
    <div class="collapse navbar-collapse navbar-left" id="myNavbar">
        <ul class="nav navbar-nav">
            <li><a href="#">DASHBOARD</a></li>
            <li class="active"><a href="#">DIRECTORY</a></li>
            <li><a href="#">CONTACT</a></li>
            <li><a href="#">ABOUT</a></li>
        </ul>
    </div>
</div>

如果我选择了＆＃34;目录＆＃34;页面，切换按钮应显示目录作为其值。

Answer 1

没有提供自动化来执行此操作。您需要使用jquery / javascript来执行此操作。您可以关注this以供参考。您可能需要使用正确的选择器将<i class="glyphicon glyphicon-menu-hamburger"></i>替换为所选的菜单文本。

Answer 2

在jsfiddle-＆gt; https://jsfiddle.net/Mahua/8bzbv2es

这是一个解决方案：

<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>                        
</button>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active"><a data-toggle="tab" href="#dashboard" aria-expanded="true">DASHBOARD</a></li>
<li class=""><a data-toggle="tab" href="#directory" aria-expanded="false">DIRECTORY</a></li>
<li class=""><a data-toggle="tab" href="#contact" aria-expanded="false">CONTACT</a></li>
<li class=""><a data-toggle="tab" href="#about" aria-expanded="false">ABOUT</a></li>
</ul>
</div>
</div>
</nav>

<div class="tab-content">
<!--dashboard starts-->
<div class="tab-pane fade in active" id="dashboard">   
<p><b>DASHBOARD</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<!--dashboard ends-->
<!--directory starts-->
<div class="tab-pane fade" id="directory">   
<p><b>DIRECTORY</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<!--directory ends-->
<!--contact starts-->
<div class="tab-pane fade" id="contact">   
<p><b>CONTACT</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<!--contact ends-->
<!--about starts-->
<div class="tab-pane fade" id="about">   
<p><b>ABOUT</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<!--about ends-->
</div>

希望有所帮助!!

如何在引导程序的切换按钮中显示所选菜单项

2 个答案: