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

Question

In the site that I'm working on, I am using the jQuery .toggle() function to display and hide the navigation when viewing the site in mobile devices. Here's the code that I am using:

<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>

It is toggling the navigation but the text links are not displaying. I've used the element inspector in chrome and I'm seeing that overflow:hidden is being added inline to the element by the .toggle() function but it is not being removed when toggling to display the links. I've taken a look at the jQuery documentation for this but it doesn't mention anything about overflow:hidden. You can see that this is being adding by this function because it does not appear until after clicking the toggle button

Here's the url to the site: http://theinfluence.iamchrisbarnard.com

The toggle function is being applied to the toggle icon in the top right but can only be seen at smaller sceensizes. And it's toggling the nav element at the very top of the page.

What could be causing this issue?

Answer 1

Instead of making background image for the toggle menu try adding as image. Code something similar to

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

(You may see live example at http://pfitr.net/frontend/index.html )