jquery - jQuery html cssスライドトグル効果

Question

映画の情報もある映画予約システムのウェブサイトを作ろうとしています。ユーザーが特定の映画のポスターをクリックすると、その情報 (説明とキャスト) が表示されてスライドダウンするメカニズムを実装したいと考えています。私はこれを達成しました。しかし、私が抱えている問題は、特定の映画の説明が下にスライドすると、同じ列にある他のすべての映画のポスターが一緒にスライドすることです。私が望むのは、他のすべての要素が静的なままであることです。

ここに私のHTMLコードがあります:

    <div class="contents">
    <table id="movies">
        <tr>
            <td class="Horror"><img id="Image1" src="<?php echo "$image_1"; ?>" width=250 height=400> <p><?php echo "Name: $name_1";?></p>
                                                                                                <p class="description" id="desc1"><?php echo "<span>Description:</span> $description_1"?>
                                                                                                <p class="cast" id="cast1"> <?php echo "<span>Cast:</span> $cast_1" ?></p></td>
            <td class="Action"><img id="Image2" src="<?php echo "$image_2"; ?>" width=250 height=400> <p><?php echo "Name: $name_2";?></p>
                                                                                            <p class="description" id="desc2"><?php echo "<span>Description:</span> $description_2"?>
                                                                                            <p class="cast" id="cast2"> <?php echo "<span>Cast:</span> $cast_2" ?></p></td>
            <td class="Action"><img id="Image3" src="<?php echo "$image_3"; ?>" width=250 height=400> <p><?php echo "$name_3";?></p>
                                                                                            <p class="description" id="desc3"><?php echo "<span>Description:</span> $description_3"?>
                                                                                            <p class="cast" id="cast3"> <?php echo "<span>Cast:</span>$cast_3" ?></p></td>
        </tr>
        <tr>
            <td class="Action"><img id="Image4" src="<?php echo "$image_4"; ?>" width=250 height=400> <p><?php echo "Name: $name_4";?></p>
                                                                                            <p class="description" id="desc4"><?php echo "<span>Description:</span> $description_4"?>
                                                                                            <p class="cast" id="cast4"> <?php echo "<span>Cast:</span> $cast_4" ?></p></td>
            <td class="Horror"><img id="Image5" src="<?php echo "$image_5"; ?>" width=250 height=400> <p><?php echo "Name: $name_5";?></p>
                                                                                            <p class="description" id="desc5"><?php echo "<span>Description:</span> $description_5"?>
                                                                                            <p class="cast" id="cast5"> <?php echo "<span>Cast:</span> $cast_5" ?></p></td>
            <td class="Comedy"><img id="Image6" src="<?php echo "$image_6"; ?>" width=250 height=400> <p><?php echo "Name: $name_6";?></p>
                                                                                            <p class="description" id="desc6"><?php echo "<span>Description:</span> $description_6"?>
                                                                                            <p class="cast" id="cast6"> <?php echo "<span>Cast:</span> $cast_6" ?></p></td>
        </tr>
    </table>
</div>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/show.js"></script>

そして、これは私のCSSです：

    td .description{

display:none;
padding:40px;
/*background-image: url('Images/desc_back.jpg');*/
background-color: rgba(230, 230, 239, 0.3);
color:#222;
position:relative;
right:-120px;
top:-290px;
/*margin:0, auto;*/
border: 3px solid transparent;
border-radius: 10px;
overflow:hidden;
}

    td .cast {
display:none;
/*background-color: rgba(34, 34, 34, 0.4);
color:#f3f2f1;*/
background-color: rgba(230, 230, 239, 0.3);
color:#222;
position:relative;
right:-120px;
top:-290px;

border: 3px solid transparent;
border-radius: 10px;
}
    span{
font-size:16px;
font-weight: bold;
text-decoration: underline;
}

そして私のjQuery：

    $('document').ready(function(){
var count=1;

    $('#Image1').click(function(){
if(count === 1){
    $('#desc1').slideToggle('slow');
    $('#cast1').slideToggle('slow');
     count=0;
}
else{
    $('#cast1').slideToggle('fast');
    $('#desc1').slideToggle('fast');
     count=1;
}
});
    $('#Image2').click(function(){
if(count === 1){
    $('#desc2').slideToggle('slow');
    $('#cast2').slideToggle('slow');
     count=0;
}
else{
    $('#cast2').slideToggle('fast');
    $('#desc2').slideToggle('fast');
     count=1;
}
});
    $('#Image3').click(function(){
if(count === 1){
    $('#desc3').slideToggle('slow');
    $('#cast3').slideToggle('slow');
     count=0;
}
else{
    $('#cast3').slideToggle('fast');
    $('#desc3').slideToggle('fast');
     count=1;
}
 });
    $('#Image4').click(function(){
if(count === 1){
    $('#desc4').slideToggle('slow');
    $('#cast4').slideToggle('slow');
     count=0;
}
else{
    $('#cast4').slideToggle('fast');
    $('#desc4').slideToggle('fast');
     count=1;
}
});
    $('#Image5').click(function(){
if(count === 1){
    $('#desc5').slideToggle('slow');
    $('#cast5').slideToggle('slow');
     count=0;
}
else{
    $('#cast5').slideToggle('fast');
    $('#desc5').slideToggle('fast');
     count=1;
}
});
    $('#Image6').click(function(){
if(count === 1){
    $('#desc6').slideToggle('slow');
    $('#cast6').slideToggle('slow');
     count=0;
}
else{
    $('#cast6').slideToggle('fast');
    $('#desc6').slideToggle('fast');
     count=1;
}
});
});

私が達成したいのは、説明とキャストだけをスライドさせ、他のすべてを固定したままにすることです。私が得た助けに本当に感謝します。

score 3 · Accepted Answer

テーブル、ID、カウンター、if...else ステートメントは忘れてください。この問題はあなたが考えているよりも簡単です。キーは、クラスとを使用することthisです。

デモをご覧ください。

最初に適切なマークアップを作成します。必要に応じて、段落を別の div で変更できます。ポイントは、テーブルを使用しないことです。テーブルはおそらく必要ではなく、理由もなく複雑になるからです。

<div class="movie">
  <img src="http://placekitten.com/270/390"/>
  <p>
    <strong>Title</strong>
    <span>Lorem ipsum dolor sit amet...</span>
  </p>
</div>

次に、すべてを css で配置します。使えばborder-box幅を気にしなくていいので調整もしやすいです。

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.movie { 
  width: 270px;
  height: 390px;
  position: relative;
  cursor: pointer;
}
.movie strong {
  display: block;
  font-size: 20px;
}
.movie p {
  position: absolute;
  bottom: 0;
  padding: 1em;
  margin: 0;
  width: 100%;
  background: rgba(255,255,0,.8);
  display: none;
}

最後に、必要なのは1行の jQuery だけです。

$('.movie').click(function() { $('p', this).slideToggle(); });

score 1 · Accepted Answer

次のようにできます。

$('[id^="Image"]').each(function() {
    $(this).click(function() {
        if(count === 1){
            $(this).siblings('.description').slideToggle('slow');
            $(this).siblings('.cast').slideToggle('slow');
            count=0;
        }
        else{
            $(this).siblings('.description').slideToggle('fast');
            $(this).siblings('.cast').slideToggle('fast');
            count=1;
        }
    });
})

jquery - jQuery html cssスライドトグル効果

2 に答える 2

Related

Reference