我正在尝试制作一个电影预订系统网站，该网站上也有关于电影的信息。我想实现一种机制，当用户点击特定电影的海报时，其信息（描述和演员表）会显示并向下滑动。我做到了这一点。但我遇到的问题是，当某个特定电影的描述向下滑动时，同一行中的每个其他电影海报都会向下滑动。我想要的是每个其他元素保持静态。
这是我的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;
}
});
});
我想要实现的只是希望我的描述和转换为幻灯片并保持其他一切固定。非常感谢我得到的任何帮助。
答案 0 :(得分：3)
我会忘记忘记表，id，计数器，if ... else语句。这个问题比你想的更容易。关键是使用类和this。
查看 demo 。
首先创建正确的标记。如果需要，您可以使用另一个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;
}
最后，您只需要一行 jQuery行：
$('.movie').click(function() { $('p', this).slideToggle(); });
答案 1 :(得分：1)
你可以这样做：
$('[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;
}
});
})