问题描述
我正在制作一个具有响应性并正在从wordpress提取内容的页面.有4张照片,每张照片中都有一个按钮,显示包中的内容"和玩家历史记录".当您单击每个按钮时,我希望它在照片下方显示隐藏的div内容.现在,当我单击按钮时,它会打开所有div,而不是我要显示的1个播放器.这是我正在使用的脚本
I am making a page that is responsive and is pulling content from wordpress. There are 4 photos and in each photo is a button displaying "whats in the bag" and "player history." When you click each button I want it to display the hidden div content below the photo. Right now when I click the button it opens all of the divs instead of the 1 player I want to show. Here is the script I am using
$(document).ready(function(){
$(".slidingDiv").hide();
$(".show_hide").show();
$('.show_hide').click(function(){
$(".slidingDiv").slideToggle();
return false;
});
});
$(document).ready(function(){
$(".slidingDiv2").hide();
$(".show_hide2").show();
$('.show_hide2').click(function(){
$(".slidingDiv2").slideToggle();
return false;
});
});
这是html
<div class="popup-open">
<div class="title"><?php the_title(); ?></div>
<a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title_attribute(); ?>" class="show_hide popup">WHAT'S IN THE BAG</a><br/>
<a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title_attribute(); ?>" class="show_hide2 popup">PLAYER HISTORY</a>
</div>
</div>
<div class="slidingDiv">
<div id="tabs-1">
<div class="witb-tab">
<?php
$fields = CFS()->get('witb');
if($fields) :
foreach ($fields as $field) : ?>
<div class="row">
<a target="_blank" href="<?php echo $field['cta_link'];?>">
<div class="image">
<img src="<?php echo $field['product_image'];?>" alt="<?php echo $field['product_name'];?>">
<a target="_blank" class="product-name" href="<?php echo $field['cta_link'];?>" title="<?php echo $field['product_name'];?>">
<?php echo $field['product_name'];?>
</a>
</div>
</a>
</div>
<?php endforeach; endif; ?>
</div>
<a href="#" class="show_hide" style="float:right;">CLOSE</a>
</div>
</div>
<div class="slidingDiv2">
<div class="column left">
<!-- post thumbnail -->
<?php
if (has_post_thumbnail()) {
the_post_thumbnail('profile-thumb');
}
// Check if post thumbnail exist
else {
$values = CFS()->get('gender');
if (is_array($values)) {
foreach ($values as $value => $label) {
//echo '<h1 style="color:red">' . $value . '</h1>';
echo '<img src="' . get_bloginfo('template_directory') . '/img/thumb-'. $value . '.png"' . 'alt="thumbnail" />';
}
}
}
?>
<!-- /post thumbnail -->
<div class="player-biography">
<?php echo CFS()->get('player_biography'); ?>
</div>
</div>
<div class="column right">
<div id="tabs-2">
<div class="content-wrap"><?php the_content(); // Dynamic Content ?></div>
</div>
<a href="#" class="show_hide2" style="float:right;">CLOSE</a>
</div>
</div>
推荐答案
因为选择器.className
会影响具有此类的DOM中的所有元素.您想要做的就是从单击的<a>
中移出,并使用DOM的结构通过查看其父级的父级来获取所需的元素:
Because the selector .className
affects all elements in the DOM with such class. What you will want to do is go from your clicked <a>
and use the structure of your DOM to get the element you want by looking at it's parent's parent:
$('.show_hide').click(function(){
$(this).parent().parent(".slidingDiv").slideToggle();
return false;
});
在这种情况下,您只需要一个show-hide
类和一个slideingDiv
类.不必具有slideingDiv
,slideingDiv2
,slideingDiv3
,...,因为它一开始就没有使用类的意义,它们可能像ids.结构相同,只是具有相同的类:
In this case you only need a single show-hide
class and a single slideingDiv
class. It's not necessary to have slideingDiv
, slideingDiv2
, slideingDiv3
, ... As it takes away the point of using classes in the first place, and they might as would be ids. The structure is the same, simply with the same classes:
<div class="slidingDiv">
<div id="tabs-1">
...
<a href="#" class="show_hide" style="float:right;">CLOSE</a>
</div>
</div>
<div class="slidingDiv">
<div id="tabs-2">
...
<a href="#" class="show_hide" style="float:right;">CLOSE</a>
</div>
</div>
...
这篇关于当我希望每次打开一个div时,隐藏/显示会展开所有div的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!