滑塊沒有出現

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() {

你在clear-fix之後在右側面板上也沒有關閉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>