.toggleClass 不工作？

Question

我正在尝试在使用 Jquery 和引导可见/隐藏类扩展最小化导航侧边栏时显示页脚类。切换功能适用于另外两个元素和另一个具有相同 ID (!) 的元素，但不适用于 ID 为“#filler”的页脚类：S

Staging [将屏幕缩小到 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>
                    &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/

尽管如此，您仍然需要为您的填充 id 提供您的 js