.toggle()函数增加隐藏的内联溢出

Question

在我正在处理的站点中，我使用jQuery .toggle()函数在移动设备中查看站点时显示和隐藏导航。下面是我使用的代码：

<script>

   $(document).ready(function() {
            $('.nav-toggle').click(function(){
                //get collapse content selector
                var collapse_content_selector = $(this).attr('href');                   

                //make the collapse content to be shown or hide
                var toggle_switch = $(this);
                $(collapse_content_selector).toggle(function(){
                    if($(this).css('display')=='none'){
                        toggle_switch.html('Show');//change the button label to be 'Show'
                    }else{
                        toggle_switch.html('Hide');//change the button label to be 'Hide'
                    }
                });
            });

        }); 
</script>

它正在切换导航，但文本链接没有显示。我在chrome中使用了元素检查器，并且我看到溢出：.toggle()函数正在内联地将隐藏添加到元素中，但是在切换以显示链接时不会删除它。我已经看过这方面的jQuery文档，但是它没有提到任何关于溢出:隐藏的内容。您可以看到这个函数正在添加，因为它直到单击切换按钮之后才会出现。

以下是该网站的网址：http://theinfluence.iamchrisbarnard.com

切换功能正应用于右上角的切换图标，但只能在较小的尺寸上看到。它在页面顶部切换导航元素。

是什么导致了这个问题？

Answer 1

不要为切换菜单制作背景图像，而是尝试添加为图像。代码类似于

Html

 <a href="javascript:void(0);" id="mobibtn" style="display:none;"><img src="images/icon_mobile_menu.jpg" alt="m"> Menu</a>

jQuery

$(window).resize(function() {
var windowWidth = $(window).width();
if (windowWidth < 366) {
    $('#nav').hide();
    $('#mobibtn').show();

} else {
    $('#nav').show();
    $('#mobibtn').hide();
    $('#mobimenu').hide();
}
});

$(window).load(function() {
var windowWidth = $(window).width();
if (windowWidth < 366) {
    $('#nav').hide();
    $('#mobibtn').show();

} else {
    $('#nav').show();
    $('#mobibtn').hide();
    $('#mobimenu').hide();
}
});

$(document).ready(function() {
$('#mobibtn').click(function() {
     $('#mobimenu').toggle();
});
});

(您可以在http://pfitr.net/frontend/index.html上看到实际示例)