Javascript 当我希望每次打开一个div时，“隐藏/显示”会展开所有div

我正在制作一个有响应性的页面，并从wordpress中提取内容。共有4张照片，每张照片中都有一个按钮，显示“包中的内容”和“玩家历史记录”。单击每个按钮时，我希望它在照片下方显示隐藏的div内容。现在，当我点击按钮时，它会打开所有的div，而不是我想显示的1个播放器。这是我正在使用的脚本

$(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中具有此类类的所有元素。您要做的是从单击的

...    
...

---

尝试使用“this”，而不是单击函数中的类。您也不需要一个以上的就绪函数。正如您所知，您的代码的问题在于，您的目标是类的所有元素。您还可以使用ID来定位特定的元素

$(document).ready(function(){

   $(".slidingDiv").hide();
   $(".show_hide").show();

   $('.show_hide').click(function(){
      $(this).parents('.slidingDiv').slideToggle();
      return false;
   });
   $(".slidingDiv2").hide();
   $(".show_hide2").show();

   $('.show_hide2').click(function(){
      $(this).parents('.slidingDiv2').slideToggle();
      return false;
   });
});

---

我相信您正在寻找

此

选择器

比如说你有这样的东西：

<div class="item">
    <h1>Item1</h1>
    <div class="show_hide">
        Popping in and out 1.
    </div>
</div>

<div class="item">
    <h1>Item2</h1>
    <div class="show_hide">
        Popping in and out 2.
    </div>
</div>

var main=function（）{
$（'.show_hide'）.hide（）；
$（'.item'）。单击（函数（）{
$（this）.children（'.show_hide'）.slideToggle（）；
});
}
$（文件）.ready（主）

项目1
进进出出1。
项目2
进进出出2。
您可以尝试类似的方法

$(document).ready(function(){
   // hide all divs class starts with slidingDiv
   $("div[class^='slidingDiv']").hide();
   // show all anchor class starts with show_hide
   $("a[class^='show_hide']").show();


  // anchor click event
    $(".title > a[class^='show_hide']").on('click', function(e){
      e.preventDefault(); // prevent to reload
      // slide up all divs starts with slidingDiv but not the slidingDiv with index with <a> .. that mean if you click a with index() 0  it will hide all slidingDiv divs and show slidingDiv with index 0  and 1 for 1 and son on
      $("div[class^='slidingDiv']").not($("div[class^='slidingDiv']").eq($(this).index())).slideUp();
      $("div[class^='slidingDiv']").eq($(this).index()).slideToggle();
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

<script>
      $(document).ready(function(){
       // hide all divs class starts with slidingDiv
       $("div[class^='slidingDiv']").hide();
       // show all anchor class starts with show_hide
       $("a[class^='show_hide']").show();


      // anchor click event
        $(".title > a[class^='show_hide']").on('click', function(e){
          e.preventDefault(); // prevent to reload
          // slide up all divs starts with slidingDiv but not the slidingDiv with index with <a> .. that mean if you click a with index() 0  it will hide all slidingDiv divs and show slidingDiv with index 0  and 1 for 1 and son on
          $("div[class^='slidingDiv']").not($("div[class^='slidingDiv']").eq($(this).index())).slideUp();
          $("div[class^='slidingDiv']").eq($(this).index()).slideToggle();
        });
    });

</script>

$（文档）.ready（函数（）{
//隐藏所有div类以slidingDiv开始
$（“div[class^='slidingDiv']）。hide（）；
//show all anchor类以show\u hide开始
$（[class^='show_hide'].show（）；
//锚定点击事件
$（“.title>a[class^='show_hide']”）。在（'click'，函数（e）上{
e、 preventDefault（）；//防止重新加载
//向上滑动所有div都以slidingDiv开始，但不是索引为的slidingDiv

更清晰的演示


使用此代码，而不是您发布的所有js代码

请确保在
中包含jquery，或者在关闭
之前，然后运行代码

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>



确定
内或
前的完整代码应如下所示

$(document).ready(function(){
   // hide all divs class starts with slidingDiv
   $("div[class^='slidingDiv']").hide();
   // show all anchor class starts with show_hide
   $("a[class^='show_hide']").show();


  // anchor click event
    $(".title > a[class^='show_hide']").on('click', function(e){
      e.preventDefault(); // prevent to reload
      // slide up all divs starts with slidingDiv but not the slidingDiv with index with <a> .. that mean if you click a with index() 0  it will hide all slidingDiv divs and show slidingDiv with index 0  and 1 for 1 and son on
      $("div[class^='slidingDiv']").not($("div[class^='slidingDiv']").eq($(this).index())).slideUp();
      $("div[class^='slidingDiv']").eq($(this).index()).slideToggle();
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

<script>
      $(document).ready(function(){
       // hide all divs class starts with slidingDiv
       $("div[class^='slidingDiv']").hide();
       // show all anchor class starts with show_hide
       $("a[class^='show_hide']").show();


      // anchor click event
        $(".title > a[class^='show_hide']").on('click', function(e){
          e.preventDefault(); // prevent to reload
          // slide up all divs starts with slidingDiv but not the slidingDiv with index with <a> .. that mean if you click a with index() 0  it will hide all slidingDiv divs and show slidingDiv with index 0  and 1 for 1 and son on
          $("div[class^='slidingDiv']").not($("div[class^='slidingDiv']").eq($(this).index())).slideUp();
          $("div[class^='slidingDiv']").eq($(this).index()).slideToggle();
        });
    });

</script>


$（文档）.ready（函数（）{
//隐藏所有div类以slidingDiv开始
$（“div[class^='slidingDiv']）。hide（）；
//show all anchor类以show\u hide开始
$（[class^='show_hide'].show（）；
//锚定点击事件
$（“.title>a[class^='show_hide']”）。在（'click'，函数（e）上{
e、 preventDefault（）；//防止重新加载
//向上滑动所有div以slidingDiv开始，但不是索引为“”的slidingDiv。这意味着，如果单击索引为（）0的滑块，它将隐藏所有slidingDiv，并显示索引为0和1的slidingDiv，索引为1，子为1
$（$div[class^='slidingDiv']）。而不是（$（$div[class^='slidingDiv']））。eq（$（this.index（）））.slideUp（）；
$（$div[class^='slidingDiv']）.eq（$（this.index（））.slideToggle（）；
});
});
我不明白一件事。在上面的代码中，他提到了两个不同的类，分别为.slidingDiv和.slidingDiv2，这两个类的名称都是唯一的，但您是用一个单独的类名一起定义的。@SridharGudimela类不是唯一的，它们应该重复。否则您将使用id相反。因此，是的，我只是用类
slidingDiv
来定义它，这两个元素都会有，而不是两个单独的类。我尝试使用你的代码，但它不起作用。我缺少什么吗？它不起作用了吗？有错误吗？发生了错误吗？我编辑了它。这不是一个理想的解决方案，我会结构化的页面有点不同，应该可以正常工作，但什么都没有发生。div仍然隐藏。请使用编辑过的代码进行尝试。很遗憾，我无法为您尝试，HTML有点难阅读。请尝试使用“parents（）”方法。您的代码可以工作，但当我自己添加它时，但当我尝试将html标记添加到div类弹出窗口open div中时，它不起作用。您必须有可见的内容才能单击，因此您不能将
h1
移动到隐藏的
div
中。我添加h1的div没有隐藏。您是如何尝试的g是否添加？我想我误解了你的评论。现在在2个按钮中，我需要在其中显示2个按钮或链接。当我将你的标记移动到其中时，它不再工作。希望这是有意义的。嗨，穆罕默德。这段代码导致链接在新页面中打开。@sizemattic我相信它不会。。请在上次更新后重试。对不起，我的坏eq（$（this.index（））应该是eq（$（this.index（））…现在就试试它仍然在做同样的事情。你在JFIDLE中创建的第一个演示是我想要做的。我不熟悉JFIDLE，但是你的代码在那里工作，但是当我将它添加到我的站点时，它不工作。左边是一个onload选项。我应该使用某个库吗？这里的初学者很抱歉，如果我不清楚这一点s、 你能把脚本源代码发布到jfiddle中吗？它在评论中被切断了。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

<script>
      $(document).ready(function(){
       // hide all divs class starts with slidingDiv
       $("div[class^='slidingDiv']").hide();
       // show all anchor class starts with show_hide
       $("a[class^='show_hide']").show();


      // anchor click event
        $(".title > a[class^='show_hide']").on('click', function(e){
          e.preventDefault(); // prevent to reload
          // slide up all divs starts with slidingDiv but not the slidingDiv with index with <a> .. that mean if you click a with index() 0  it will hide all slidingDiv divs and show slidingDiv with index 0  and 1 for 1 and son on
          $("div[class^='slidingDiv']").not($("div[class^='slidingDiv']").eq($(this).index())).slideUp();
          $("div[class^='slidingDiv']").eq($(this).index()).slideToggle();
        });
    });

</script>