. Функция 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> 

Он переключая навигации, но в тексте ссылки не отображаются. Я использовал инспектор элементов в хроме, и я вижу, что переполнение: скрытое добавляется встроенным элементом в функцию .toggle(), но при переключении для отображения ссылок он не удаляется. Я просмотрел документацию jQuery для этого, но в нем ничего не говорится о переполнении: 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)