停止css目標受背景影響

我使用目標選擇器來放置和移除顯示和隱藏導航菜單的類。問題是，當用戶使用瀏覽器上的後退按鈕時，菜單狀態會變得混亂。停止css目標受背景影響

這是我的CSS代碼

<style> 
#buttons-container a.close-menu-primary{display: none;} 
#wrap:target #mainmenu{display: block;} 
#wrap:target #buttons-container a.open-menu-primary{display: none;} 
#wrap:target #buttons-container a.close-menu-primary{display: block;} 
</style>

buttons-container是有兩個按鈕一個div，open-menu-primary & close-menu-primary，即切換彼此開啓和關閉，並顯示或隱藏的MainMenu。

當有人使用後退按鈕時會出現該問題。在這種情況下，它僅切換打開和關閉菜單主菜單之間的按鈕狀態，這是漢堡和關閉圖像。

你可以在這裏查看現場版本，如果你讓瀏覽器足夠小，或者使用移動設備，屏幕尺寸必須小於（最小寬度：768px）和（最小高度：558px）website with toggle by target selector

希望有人可以清除這個，如果可以使用這種方式的目標，或者如果有更好的方式來獲得這種影響，沒有腳本請。在此先感謝！

來源

2015-08-20 Santana

我不明白和/或我不能重現它。但請注意，如果您修改DOM並導航到另一個頁面，那麼當您返回頁面時，這些更改將會丟失。 – GolezTrol

後退按鈕將'open-menu-primary'更改爲'close-menu-primary'，反之亦然，而不會影響菜單類/狀態。 – Santana

問題是......當用戶按下後退按鈕時，是否想返回菜單可見性的一種狀態（即隱藏或取消隱藏），還是想要返回一頁？

我檢查你的鏈接頁面http://www.rieon.nl。我認爲這是問題：

我認爲你希望用戶返回一頁，而不僅僅是隱藏菜單。然後，你需要改變這段代碼

jQuery(document).ready(function($) { 
    $("#buttons-container a").click(function(){ 
     $("nav").toggleClass("main"); 
    }); 
});

，並添加任何return false或e.preventDefault()：

jQuery(document).ready(function($) { 
    $("#buttons-container a").click(function(e){ 
     $("nav").toggleClass("main"); 
     e.preventDefault(); // use either one 
     return false;  // of these lines 
    }); 
});

的問題是，通過點擊導航鍵的鏈接，瀏覽器執行的JavaScript處理程序顯示菜單並導航到鏈接的href地址（這是#wrap），並在其歷史記錄中創建一個新的步驟，以便當用戶點擊返回按鈕時，瀏覽器將返回到之前的狀態（通常是同一頁面，但沒有＃包）。通過添加return false（即jQuery專業版）或在事件對象（標準JS）上調用preventDefault()，您可以取消導航並僅保留自己的處理程序。

來源

2015-08-20 21:07:40

我想你已經明白了，對我來說這是qiuet新的JQuery工作，但我會測試並嘗試你的消化。非常感謝Ondra到目前爲止我會回來。 – Santana

我忘了自己做了什麼，但「目標選擇器」僅用於切換「關閉」和「打開」菜單按鈕。 JQuery爲導航div切換clas的「主」，這使得它的頂部位置爲0px或60px。所以問題是，當你在你的瀏覽器中使用後退按鈕時，你改變了「target」選擇器並改變了按鈕的狀態，但不是由JQuery控制的導航div的位置。 @Ondra，'e.preventDefault'沒有任何區別，'return false'禁用'target'選擇器。 – Santana

我應該如何使用JQuery並更改'buttons-container a.close - 主要「和」。開放小學「以及導航。我寧願使用css解決方案，然後使用目標以及導航，但不能用一個目標選擇器設置兩個不同的類，或者可以嗎？ – Santana

停止css目標受背景影響

回答

相關問題