Question

我试图通过使用Jquery和bootstrap可见/隐藏类来扩展最小化导航侧边栏时显示页脚类。切换功能适用于另外两个元素，另一个元素具有相同的ID（！），而不是具有id＆＃39;＃filler＆＃39;的页脚类。：S

分段[缩小屏幕宽度低于768px以查看问题]：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>
                    &copy; 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>

Answer 1

尝试将页脚的ID从填充更改为页脚。然后确保在你的js中也改变它。 <footer class="text-center hidden-xs" id="footer">

$('#footer').toggleClass('hidden-xs').toggleClass('visible-xs');

很确定这是你想要实现的目标。看看我的小提琴看 http://jsfiddle.net/a4mqw9ox/

尽管

，你仍然必须拥有你的js作为你的填充ID

.toggleClass不工作？

1 个答案: