移動菜單關閉點擊。

我在過去多次使用stackoverflow來解決我的編碼問題，但是這次我找不到正確的答案，所以我註冊並決定自己提問。移動菜單關閉點擊。

TBH，在編碼方面我不太好，我用我的基本CSS，HTML和PHP知識爲我的朋友製作了一些漂亮的WordPress網站。

我知道上面的問題已經在這裏問過，但我真的不知道如何應用我能找到的案例。

這是我現在正在處理的網站：http://serwer1652796.home.pl。

我希望手機菜單在有人點擊其中一個鏈接時關閉。我知道我可能不得不在某個主題的文件中使用一些javascript代碼，但是我應該寫什麼以及在哪個文件中？（我以前從來沒有對付JS，所以，請予以諒解。）

2016-06-09 Bartek

你可以添加一些代碼嗎？ –

我不確定，但這裏是我在.js文件中找到的與菜單相關的行。 1. bootstrap.js http://s33.postimg.org/xpm0oaxan/Zrzut_ekranu_2016_06_09_o_20_00_37.png 2. theme.js http://s33.postimg.org/9zjpx4snj/Zrzut_ekranu_2016_06_09_o_20_01_52.png – Bartek

在theme.js文件，上線260有代碼看起來像這樣

jQuery('.home #site-navigation li a[href*=#]').on('click', function(event){ 
    event.preventDefault(); 
    smoothScroll(jQuery(this.hash)); 
});

爲了關閉菜單中，您需要添加一些行來切換顯示控制菜單可見性的各種項目上的一些CSS類。它應該是這樣的後來

jQuery('.home #site-navigation li a[href*=#]').on('click', function(event){ 
    event.preventDefault(); 
    smoothScroll(jQuery(this.hash)); 
    jQuery('#nav-toggle').toggleClass('nav-is-visible'); 
    jQuery('.main-navigation .onepress-menu').toggleClass("onepress-menu-mobile"); 
    jQuery('.header-widget').toggleClass("header-widget-mobile"); 
});

我得到了額外的線路，從發生的事件添加當您手動通過X圖標，它可以在theme.js上線7，8和9中找到關閉菜單。

來源

2016-06-09 18:07:56 shamsup

謝謝！它工作得很好。 – Bartek

我看到你的主題是使用jQuery。您可以添加像這樣的footer.php文件：

<script> 
    $(".onepress-menu li a").on("click", function() { 
    $(".onepress-menu").toggleClass("onepress-menu-mobile"); 
    }); 
</script>

就可以看到效果模擬這裏：

jsfiddle

來源

2016-06-09 18:18:53

移動菜單關閉點擊。

回答

相關問題