2

在我正在处理的站点中，我使用 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 中使用了元素检查器，我看到 overflow:hidden 正在通过 .toggle() 函数内联添加到元素中，但是在切换显示链接时它没有被删除。我已经为此查看了 jQuery 文档，但它没有提到有关溢出的任何内容：隐藏。您可以看到这是通过此功能添加的，因为它直到单击切换按钮后才会出现

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

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

什么可能导致此问题？

4

1 回答 1

0

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

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

于 2013-08-27T19:26:38.863 回答