gpt4 book ai didi

javascript - 切换侧边栏无法正常工作

转载 作者:太空宇宙 更新时间:2023-11-04 08:10:32 25 4
gpt4 key购买 nike

我在最新的 wordpress 上使用 quill free 主题 - http://lencos.ro/7greendays/

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

  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>

有人可以帮忙吗?

最佳答案

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

我无法在我的机器上重现第一个问题。也许尝试清除缓存或提供更好的说明如何重现问题。

关于javascript - 切换侧边栏无法正常工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46327300/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com