切換側邊欄無法正常工作

Question

我在最新的wordpress上使用了無羽毛筆主題-http: //lencos.ro/7greendays/

該網站的側邊欄包含菜單，徽標和一些其他信息。 我希望在移動設備上有一個優雅的漢堡包按鈕，該按鈕在單擊時顯示側邊欄，然后在再次單擊時將其隱藏。 在此過程中，我遇到了一些問題，無法解釋原因：

1. 我添加了漢堡按鈕，單擊該按鈕將顯示一個X以隱藏側邊欄。 問題是，如果側邊欄是可見的，因此X是可見的，並且我刷新頁面，它仍然顯示X，而不顯示漢堡菜單。 我想要這樣，一旦網站刷新以顯示漢堡包。

2. 第二個問題是由於某種原因，我無法使切換開關正常工作。 它顯示側邊欄，但之后立即將其隱藏。 我想要的是側邊欄從右側漸入，並且屏幕中央的寬度和高度大約為90％。 我嘗試了多種選擇，但都沒有達到我想要的方式。

到目前為止，這是我的代碼-logowrapper是側邊欄：

<div class="spinner-master3" id="menubutton">
    <input type="checkbox" id="spinner-form3" />
    <label for="spinner-form3" class="spinner-spin3">
        <div class="spinner3 diagonal part-1"></div>
        <div class="spinner3 horizontal"></div>
        <div class="spinner3 diagonal part-2"></div>
    </label>
</div>

<div class="logowrapper" id="sidebarleft">
    <div class="logo">
       <img src="wp-content/themes/quill/images/logo.png" alt="" title="" />
    </div><!-- logo -->

    <div class="menu-wrapper">
       <?php ubermenu( 'main' ); ?>
    </div><!-- menu-wrapper -->

    <div class="rezervari">
       <a href="#" class="rezervari-button">REZERVARI</a>
    </div><!-- rezervari -->

    <div class="address">
       <h3>Str. Michael Vais, Nr, 22</h3>
       <h3>Brasov Jud. Brasov</h3>
       <h3 class="phone">0234 112 321</h3>
    </div><!-- address -->
</div><!-- logowrapper -->

CSS：

.spinner-master3 * {
    transition:all 0.3s;
    -webkit-transition:all 0.3s;
    box-sizing:border-box;
}

.spinner-master3 {
    position:absolute;
    height:30px;
    width:30px;
    right:20px;
    top:20px;
    display: none;
}

.spinner-master3 input[type=checkbox] {
    display:none;
}

.spinner-master3 label {
    cursor:pointer;
    position:absolute;
    z-index:99;
    height:100%;
    width:100%;
    top:10px;
    left:0;
}

.spinner-master3 .spinner3 {
    position:absolute;
    height:5px;
    width:100%;
    background-color:#fff;
}

.spinner-master3 .diagonal.part-1 {
    position:relative;
    float:left;
}

.spinner-master3 .horizontal {
    position:relative;
    float:left;
    margin-top:6px;
}

.spinner-master3 .diagonal.part-2 {
    position:relative;
    float:left;
    margin-top:6px;
}

.spinner-master3 input[type=checkbox]:checked ~ .spinner-spin3 > .horizontal {
    transform:scale(2,1);
    -webkit-transform:scale(2,1); 
    opacity: 0;
}

.spinner-master3 input[type=checkbox]:checked ~ .spinner-spin3 > .diagonal.part-1 {
    transform:rotate(-135deg);
    -webkit-transform:rotate(-135deg);
    margin-top:10px;
}

.spinner-master3 input[type=checkbox]:checked ~ .spinner-spin3 > .diagonal.part-2 {
    transform:rotate(135deg);
    -webkit-transform:rotate(135deg);
    margin-top:-16px;
}

/* -------------------------------------------------- LOGO -------------------------------------------------- */

.logowrapper{
    width:355px;
    height: 100%;
    position: fixed;
    display: flex;              /* establish flex container */
    flex-direction: column;     /* stack flex items vertically */
    justify-content: center;    /* center items vertically, in this case */
    align-items: center;
    left:0;
    background: #476644 url('images/background-menu.png') no-repeat center center;  
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover;
    z-index: 1000000;
}

.logo{ 
    height:auto; 
    width:160px; 
    display:block;
    z-index:10; 
    margin: 0 auto 50px;

} 

.logo img{ 
    width:100%; 
} 

@media (max-width: 700px) {
    .logowrapper{
        display:none;

    }

    .spinner-master3 {
        display: block;
    }
}

劇本：

<script>$( ".spinner-master3" ).click(function() {
  $( ".logowrapper" ).toggle( "slow", function() {
    // Animation complete.
  });
});</script>

誰能幫忙嗎？

Answer 1

第二個問題是由事件“冒泡”引起的。 由於您在div中有一個輸入，因此當您單擊div時會觸發兩次。 為了修復它，您可以添加evt.stopPropagation(); 和evt.preventDefault(); 到您的click()函數。

$( ".spinner-master3" ).click(function(evt) {
evt.stopPropagation();
evt.preventDefault();
  $( ".logowrapper" ).toggle( "slow", function() {
    // Animation complete.
  });
});

或者，您可以簡單地從div中刪除輸入並使其隱藏。

 <input type="checkbox" id="spinner-form3" />
 <div class="spinner-master3" id="menubutton">
    <label for="spinner-form3" class="spinner-spin3">
        <div class="spinner3 diagonal part-1"></div>
        <div class="spinner3 horizontal"></div>
        <div class="spinner3 diagonal part-2"></div>
    </label>
 </div>


#spinner-form3
{
    display: none;
}

我無法在計算機上復制第一個問題。 也許嘗試清除緩存或提供更好的指導以解決問題。