Ползунок не отображается

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>