切换侧边栏无法正常工作

时间:2017-09-20 16:28:43

标签: javascript html css toggle hamburger-menu

我在最新的wordpress上使用了一个免费主题 - http://lencos.ro/7greendays/

该网站有一个侧边栏,其中包含菜单,徽标和其他一些信息。我想在移动设备上有一个优雅的汉堡包按钮,在点击时显示侧边栏,然后再次点击时隐藏它。我一路上遇到了一些问题,无法解释原因:

  1. 我添加了汉堡包按钮,一旦点击,就会显示一个X来隐藏侧边栏。问题是,如果侧边栏是可见的,因此X是可见的并且我刷新页面,它仍然显示X而不是汉堡菜单。我希望,一旦网站刷新显示汉堡包。

  2. 第二个问题是由于某种原因我无法使切换正常工作。它显示了侧边栏,但之后立即将其隐藏起来。我想要的是侧边栏从右侧淡入,并在屏幕中央有大约90%的宽度和高度。我尝试了多种选择,但都没有按照我想要的方式工作。

  3. 到目前为止,这是我的代码 - 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>
    

    有人可以帮忙吗?

1 个答案:

答案 0 :(得分:1)

第二个问题是由事件&#34;冒泡&#34;引起的。因为你在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;
}

我无法在我的机器上复制第一个问题。也许尝试清除缓存或更好地指导如何复制问题。