Question

我正在创建一个响应迅速的页面，并从wordpress中提取内容。有4张照片，每张照片中都有一个按钮，显示＆＃34;袋子里面是什么＆＃34;和＃34;球员历史。＆＃34;当您单击每个按钮时，我希望它显示照片下方隐藏的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>

Answer 1

因为选择器.className会影响DOM中具有此类的所有元素。您要做的就是从点击的<a>开始，使用您的DOM结构，通过查看父母的父母来获取您想要的元素：

$('.show_hide').click(function(){
    $(this).parent().parent(".slidingDiv").slideToggle();
    return false;
});

在这种情况下，您只需要一个show-hide类和一个slideingDiv类。没有必要slideingDiv，slideingDiv2，slideingDiv3，......因为它首先取消了使用类的重点，它们可能会如此IDS。结构是相同的，只是使用相同的类：

<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>
 ...

Fiddle Example

Answer 2

请尝试使用＆＃34;此＆＃34;而不是在点击功能中定位该类。您也不需要多个就绪功能。您知道，代码的问题在于您定位了该类的所有元素。您还可以使用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;
   });
});

Answer 3

我相信您正在寻找this选择器。

让我们说你有类似的东西：

<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>

你可以做到

$('.item').click(function() {
    $(this).children('.show_hide').slideToggle();
});

JSFiddle

var main = function() {
  $('.show_hide').hide();

  $('.item').click(function() {
    $(this).children('.show_hide').slideToggle();
  });
}

$(document).ready(main);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<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>

Answer 4

你可以尝试这样的事情

$(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();
    });
});

DEMO

更清晰的演示

DEMO

使用此代码代替您发布的所有js代码

确保在<head></head>内或关闭</body>之前包含jquery，之后运行代码

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

在<head></head>内或</body>之前的完整代码应该是这样的

<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>

隐藏/显示扩展所有div，我希望它一次打开一个

4 个答案: