当我希望每次打开一个div时，隐藏/显示会展开所有div [英] Hide/show expands all divs when I want it to open one at a time

问题描述

我正在制作一个具有响应性并正在从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的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！