滑塊不出現

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>