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

在我正在处理的站点中，我使用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>

$（文档）.ready（函数（）{
$（'.nav toggle'）。单击（函数（）{
//获取折叠内容选择器
var collapse_content_selector=$（this.attr（'href'）；
//使折叠内容显示或隐藏
变量切换开关=$（此）；
$（折叠内容选择器）。切换（函数（）{
if（$（this.css（'display'）=='none'）{
toggle_switch.html（'Show'）；//将按钮标签更改为'Show'
}否则{
toggle_switch.html（'Hide'）；//将按钮标签更改为'Hide'
}
});
});
}); 

它正在切换导航，但不显示文本链接。我在chrome中使用了元素检查器，我看到溢出：hidden被.toggle（）函数内联添加到元素中，但在切换显示链接时，它没有被删除。我已经看了jQuery文档，但是它没有提到任何关于溢出的内容：隐藏。您可以看到此函数正在添加此项，因为它只有在单击“切换”按钮后才会显示

以下是该网站的url：

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

---

什么可能导致此问题？

请尝试添加为图像，而不是为切换菜单创建背景图像。代码类似于

Html

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();
});
});

$（窗口）。调整大小（函数（）{
var windowWidth=$（window.width（）；
如果（窗宽<366）{
$（'#nav'）.hide（）；
$（'#mobibtn'）.show（）；
}否则{
$（'#nav'）.show（）；
$（'#mobibtn'）.hide（）；
$（'mobimenu'）.hide（）；
}
});
$（窗口）。加载（函数（）{
var windowWidth=$（window.width（）；
如果（窗宽<366）{
$（'#nav'）.hide（）；
$（'#mobibtn'）.show（）；
}否则{
$（'#nav'）.show（）；
$（'#mobibtn'）.hide（）；
$（'mobimenu'）.hide（）；
}
});
$（文档）.ready（函数（）{
$（'#mobibtn'）。单击（函数（）{
$（'#mobimenu'）.toggle（）；
});
});

---

（您可以在中看到实时示例）

切换事件方法已被弃用/删除。在您的情况下，只需将其替换为

单击

——注意，这不会解决你的问题。注意：我在Firefox中看到了链接，但没有在Chrome中看到。这很奇怪，但只是为了好玩，你有没有尝试在导航中添加你自己的“溢出：可见”样式？@andi我没有检查Firefox。谢谢你的提醒。是的，这很奇怪，溢出隐藏只是被添加到chrome中。@kevinB谢谢，那我必须再看一看文档

$(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();
});
});