所以我在网站上工作,我需要左侧和右侧的抽屉。首先,我做了左边的一个,似乎工作得很好所以我决定复制它并更改名称和CSS,以使相同的一个出现在右侧,但它没有显示我可能犯了一个小错误,我可能做了一个大错,但我找不到它。希望有些人可以帮助我解决这个问题。它实际上是窗口左角的一个X,它在抽屉里滑动信息,同样的东西也应该在右侧。
anualidad
$(document).ready(function() {
$(".trigger-left").click(function() {
$(".panel-slide-left").toggle("fast");
$(this).toggleClass("active");
return false;
});
});
$(document).ready(function() {
$(".trigger-right").click(function() {
$(".panel-slide-right").toggle("fast");
$(this).toggleClass("active");
return false;
});
});
.panel-slide-right {
position: absolute;
right: 0;
display: none;
background-color: #edf2f4;
width: 330px;
height: 100%;
padding-left: 50px;
padding-top: 50px;
}
.panel-slide-left p {
margin: 0 0 15px;
padding: 0;
color: #ccc;
}
.panel-slide-right p {
margin: 0 0 15px;
padding: 0;
color: #ccc;
}
.panel-slide-left a:hover,
.panel-slide-left a:visited:hover {
margin: 0;
padding: 0;
color: #fff;
text-decoration: none;
border-bottom: 1px solid #fff;
}
.panel-slide-left a:hover,
.panel-slide-left a:visited:hover {
margin: 0;
padding: 0;
color: #fff;
text-decoration: none;
border-bottom: 1px solid #fff;
}
a.trigger-left {
position: absolute;
text-decoration: none;
top: 50px;
left: 0;
font-size: 16px;
letter-spacing: -1px;
font-family: verdana, helvetica, arial, sans-serif;
color: #fff;
padding-left: 20px;
font-weight: 700;
display: block;
}
a.trigger-right {
position: absolute;
top: 50px;
right: 0;
top: 50px;
left: 0;
font-size: 16px;
letter-spacing: -1px;
font-family: verdana, helvetica, arial, sans-serif;
color: #fff;
padding-left: 20px;
font-weight: 700;
display: block;
}
a.trigger-left:hover {
position: absolute;
text-decoration: none;
top: 50px;
left: 0;
font-size: 16px;
letter-spacing: -1px;
font-family: verdana, helvetica, arial, sans-serif;
color: #fff;
padding-left: 20px;
font-weight: 700;
display: block;
height: 50px;
}
a.trigger-right:hover {
position: absolute;
text-decoration: none;
top: 50px;
right: 0;
font-size: 16px;
letter-spacing: -1px;
font-family: verdana, helvetica, arial, sans-serif;
color: #fff;
padding-left: 20px;
font-weight: 700;
display: block;
height: 50px;
}
a.active.trigger-left {
color: #fff;
}
a.active.trigger-right {
color: #fff;
}
答案 0 :(得分:1)
您的代码段效果不佳,很难为您解决。但我想如果你将所有内容都移到一个$(document).ready(function() {
在clear-fix之后,您还错过了右侧面板上的结束div。实际上这可能是问题所在。
答案 1 :(得分:1)
我简化了代码并修复了一些错误。
$(document).ready(function() {
$(".trigger-left").click(function() {
$(".panel-slide-left").toggle("fast");
$(this).toggleClass("active");
return false;
});
$(".trigger-right").click(function() {
$(".panel-slide-right").toggle("fast");
$(this).toggleClass("active");
return false;
});
});

.columns {
padding: 50px;
}
label > h5 {
display: inline-block;
}
.panel-slide-left,
.panel-slide-right {
position: absolute;
display: none;
background-color: #edf2f4;
width: 330px;
height: 100%;
top: 0;
}
.panel-slide-left {
left: 0;
}
.panel-slide-right {
right: 0;
}
.panel-slide-left p,
.panel-slide-right p {
margin: 0 0 15px;
padding: 0;
color: #ccc;
}
.panel-slide-left a:hover,
.panel-slide-left a:visited:hover,
.panel-slide-right a:hover,
.panel-slide-right a:visited:hover {
margin: 0;
padding: 0;
color: #fff;
text-decoration: none;
border-bottom: 1px solid #fff;
}
a.trigger-left,
a.trigger-left:hover,
a.trigger-right,
a.trigger-right:hover {
position: absolute;
text-decoration: none;
top: 50px;
font-size: 16px;
letter-spacing: -1px;
font-family: verdana, helvetica, arial, sans-serif;
font-weight: 700;
display: block;
}
a.trigger-left,
a.trigger-left:hover {
left: 0;
padding-left: 20px;
}
a.trigger-right,
a.trigger-right:hover {
right: 0;
padding-right: 20px;
}
a.active.trigger-left,
a.active.trigger-right {
color: #fff;
}

<div class="panel-slide-left">
<div class="columns">
<div class="colcenter">
<div class="checkbox">
<label>
<input type="checkbox" value="">
<h5>Broadcast Language English</h5>
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" value="">
<h5>Stream Language English</h5>
</label>
</div>
</div>
</div>
</div>
<a class="trigger-left" href="#">X</a>
<div class="panel-slide-right">
<div class="columns">
<div class="colcenter">
<div class="checkbox">
<label>
<input type="checkbox" value="">
<h5>Broadcast Language English</h5>
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" value="">
<h5>Stream Language English</h5>
</label>
</div>
</div>
</div>
</div>
<a class="trigger-right" href="#">X</a>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
&#13;