我试图通过使用Jquery和bootstrap可见/隐藏类来扩展最小化的导航侧栏时显示页脚类。切换功能可用于其他两个元素以及另一个具有相同ID（！）的元素，但不适用于ID为'#filler'的页脚类：S
暂存[将屏幕缩小到768像素以下以查看问题]：http : //themidastouch.github.io/greenroom/
我的代码：
$(document).ready(function(){/* off-canvas sidebar toggle */
$('[data-toggle=offcanvas]').click(function() {
$(this).toggleClass('visible-xs text-center');
$(this).find('i').toggleClass('glyphicon-chevron-right glyphicon-chevron-left');
$('.row-offcanvas').toggleClass('active');
$('#lg-menu').toggleClass('hidden-xs').toggleClass('visible-xs');
$('#xs-menu').toggleClass('visible-xs').toggleClass('hidden-xs');
$('#filler').toggleClass('hidden-xs').toggleClass('visible-xs');
$('#btnShow').toggle();
});
});
HTML：
<ul class="nav hidden-xs" id="lg-menu">
<li class="active">
<a href="#" class="three-d">
<span style="color: #27ae60;"><i class="fa fa-home fa-sm"></i>Home</span>
<span aria-hidden="true" class="three-d-box">
<span class="front"><i class="fa fa-home fa-sm"></i>Home</span>
<span class="back"><i class="fa fa-home fa-sm"></i>Home</span>
</span>
</a>
</li>
<li>
<a href="#" class="three-d">
<span style="color: #27ae60;"><i class="fa fa-newspaper-o fa-sm"></i>Blog</span>
<span aria-hidden="true" class="three-d-box">
<span class="front"><i class="fa fa-newspaper-o fa-sm"></i>Blog</span>
<span class="back"><i class="fa fa-newspaper-o fa-sm"></i>Blog</span>
</span>
</a>
</li>
<li>
<a href="#" class="three-d">
<span style="color: #27ae60;"><i class="fa fa-info fa-sm"></i>Contact</span>
<span aria-hidden="true" class="three-d-box">
<span class="front"><i class="fa fa-info fa-sm"></i>Contact</span>
<span class="back"><i class="fa fa-info fa-sm"></i>Contact</span>
</span>
</a>
</li>
</ul>
<footer class="text-center hidden-xs" id="filler">
<ul class="social">
<li><a href="#"><i class="fa fa-facebook-square fa-lg "></i></a>
</li>
<li><a href="#"><i class="fa fa-instagram fa-lg "></i></a>
</li>
<li><a href="#"><i class="fa fa-twitter-square fa-lg "></i></a>
</li>
<li><a href="#"><i class="fa fa-youtube-square fa-lg "></i></a>
</li>
</ul>
© Greenroom 2015</footer>
<!-- tiny only nav-->
<ul class="nav visible-xs" id="xs-menu">
<li><a href="#" class="three-d text-center">
<span style="color: #27ae60;"><i class="fa fa-home fa-sm"></i></span>
<span aria-hidden="true" class="three-d-box">
<span class="front"><i class="fa fa-home fa-sm"></i></span>
<span class="back"><i class="fa fa-home fa-sm"></i></span>
</span>
</a>
</li>
<li><a href="#" class="three-d text-center">
<span style="color: #27ae60;"><i class="fa fa-newspaper-o fa-sm"></i></span>
<span aria-hidden="true" class="three-d-box">
<span class="front"><i class="fa fa-newspaper-o fa-sm"></i></span>
<span class="back"><i class="fa fa-newspaper-o fa-sm"></i></span>
</span>
</a>
</li>
<li><a href="#" class="three-d text-center">
<span style="color: #27ae60;"><i class="fa fa-info fa-sm"></i></span>
<span aria-hidden="true" class="three-d-box">
<span class="front"><i class="fa fa-info fa-sm"></i></span>
<span class="back"><i class="fa fa-info fa-sm"></i></span>
</span>
</a>
</li>
</ul>
</div>
尝试将页脚的ID从填充符更改为页脚。然后，请确保也在您的js中进行更改。<footer class="text-center hidden-xs" id="footer">
$('#footer').toggleClass('hidden-xs').toggleClass('visible-xs');
可以肯定的是，这就是您要实现的目标。查看我的小提琴以查看http://jsfiddle.net/a4mqw9ox/
不过，您仍然需要填写自己的填充剂ID的js
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句