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文档，但它没有提到关于overflow：hidden的任何内容。您可以看到此功能正在添加，因为它在单击切换按钮

之后才会显示

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

切换功能正在应用于右上角的切换图标，但只能在较小的场景中看到。它正在切换页面顶部的nav元素。

可能导致此问题的原因是什么？

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上看到实时示例）

.toggle（）函数添加溢出隐藏内联

1 个答案: