滑块不出现

Question

所以我在一个网站上工作，左侧和右侧都需要一个抽屉。 首先，我制作了左边的那个，而且看起来工作得很好，所以我决定复制它并更改名称和CSS，以使右边的那个出现，但是没有显示根本..我可能犯了一个小错误，我犯了一个大错误，但是我找不到它。 希望有些人能帮助我解决这个问题。 实际上，它是窗口左上角的X，它随信息一起在抽屉中滑动，同样的东西也应该在右侧。

 $(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; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="panel-slide-left"> <div style="clear:both;"></div> <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 style="clear:both;"></div> </div> <a class="trigger-left" href="#">X</a> <div class="panel-slide-right"> <div style="clear:both;"></div> <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 style="clear:both;"> </div> <a class="trigger-right" href="#">X</a> 

Answer 1

您的代码段效果不佳，因此很难为您修复。 但是我想如果将所有内容都移到一个$(document).ready(function() {

在清除修复之后，您还会在右侧面板上缺少一个关闭的div。 这实际上可能是问题。

Answer 2

我简化了代码并修复了一些错误。

 $(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>