スライダーが表示されない

Question

私はウェブサイトで作業していますので、左側と右側にドロワーが必要です。まず、私は左を作ってしまったので、うまく働いているように見えるので、コピーして名前とCSSを変更して、同じものを右側に表示することにしましたが、表示されません私は小さな間違いをしたかもしれない、私は大きなものを作ったかもしれないが、私はそれを見つけることができない。うまくいけば、ya'llのいくつかはこれで私を助けることができる。実際には、ウィンドウの左隅にある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

あなたのコードスニペットは、非常によくあなたのためにそれを修正するのは難しい動作しません。しかし、あなたはすべてを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>