点击时显示不同的内容

Question

我设法做到这一点，当我点击按钮时，div显示/隐藏，这要归功于这个简单的脚本：

$(document).ready(function(){

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

    $('.show_hide').click(function(){
         $(".slidingDiv").slideToggle();
    });

});

现在我想对同一页面中的多个div做同样的事情，但是如果我使用相同的脚本，它会在我的页面中显示每个隐藏的div，而不仅仅是单击按钮下面的div。任何人都可以帮我理解如何修改它吗？

这是 My DEMO ，您可以清楚地看到问题。

编辑：左边的广场应该会显示图片，但我尚未上传图片。

Answer 1

您应该使用$(this)来引用当前单击的div，并且因为您在两个按钮上都有相同的类，您应该检查其中哪一个被单击执行与之相关的操作它：

$('.show_hide').click(function(){

    if($(this).text()=='Close') //Close Case
        $(this).closest('.slidingDiv').slideToggle();
    else //More Case
        $(this).closest('.news_button').next('.slidingDiv').slideToggle();

});

希望这有帮助。

＆＃13;

＆＃13;

$(document).ready(function(){

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

  $('.show_hide').click(function(){
    
    if($(this).text()=='Close') //Close Case
        $(this).closest('.slidingDiv').slideToggle();
    else //More Case
        $(this).closest('.news_button').next('.slidingDiv').slideToggle();

  });

});

＆＃13;

.news_div_blue{
  background-color: #000000;
  color: #ffffff;
  margin: auto;
  margin-top: 10px;
  width: 1050px;
  height: 210px;
}

.news_div_blue a{
  color: #ffffff;
  margin-top: 0px;
}

.title_div_blue{
  z-index: 90;
  background-color: #000000;
  width: 1050px;
  height: 210px;
  margin-bottom: 0px;
}

.news_p_blue{
  margin-left: 10px;
  margin-top: 5px;
  width: 98%;
  color: #ffffff;

  font-family:"Myriad Pro","Trebuchet MS", sans-serif;
  color:#404040;
  font-size: 16px;

  text-align: justify;
}

/* HIDE - SHOW */
.slidingDiv {
  height: auto;
  width: 1048px;
  background-color: #E8f1fd;
  margin: auto;
  margin-top: 0px;
  z-index: 100;
  border: 1px solid #0E4186;
}

.show_hide {
  display:none;
}

/*******/
.news_image{
  float: left;
  width: 23%;
  border: 1px solid white;
  height: 150px;
  margin-left: 10px;
  margin-right: 10px;
  margin-top: 10px;
  margin-bottom: 10px;
}

.news_title_blue{
  font-family:"Myriad Pro","Trebuchet MS", sans-serif;
  color: #ffffff;
  float: right;
  width: 73%;
  border: 1px solid white;
  height: 150px;
  text-align: justify;

  margin-right: 10px;
  margin-top: 10px;
  margin-bottom: 10px;
}

.news_button{
  float: right;
  margin-right: 10px;
  margin-top: -40px;
}

/* Button Graphic */
.button_news {
  border-top: 1px solid #ffffff;
  background: #3663a3;
  background: -webkit-gradient(linear, left top, left bottom, from(#0e4086), to(#3663a3));
  background: -webkit-linear-gradient(top, #0e4086, #3663a3);
  background: -moz-linear-gradient(top, #0e4086, #3663a3);
  background: -ms-linear-gradient(top, #0e4086, #3663a3);
  background: -o-linear-gradient(top, #0e4086, #3663a3);
  -webkit-border-radius: 24px;
  -moz-border-radius: 24px;
  border-radius: 24px;
  -webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
  -moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
  box-shadow: rgba(0,0,0,1) 0 1px 0;
  text-shadow: rgba(0,0,0,.4) 0 1px 0;
  color: #ffffff;
  font-size: 15px;
  font-family: 'Arial Rounded MT Bold', 'Helvetica Rounded', Arial, sans-serif;
  text-decoration: none;
  float: right;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="news_div_blue">
  <div class="title_div_blue">
    <div class="news_image"><img src=""/></div>
    <div class="news_title_blue">Title</div>
  </div> <!-- END title_div_blue -->

  <div class="news_button"><a href="#" class="show_hide"><button class="button_news">More</button></a></div>

  <div class="slidingDiv">
    <p class="news_p_blue">
      This is the first hidden text
      <br/>
      <br/>
      <br/>
      ...
    </p>
    <div class="news_button"><a href="#" class="show_hide"><button class="button_news">Close</button></a></div>
  </div> <!-- END slidingDiv -->

  <div class="title_div_blue">
    <div class="news_image"><img src=""/></div>
    <div class="news_title_blue">Title2</div>
  </div> <!-- END title_div_blue -->

  <div class="news_button"><a href="#" class="show_hide"><button class="button_news">More</button></a></div>

  <div class="slidingDiv">
    <p class="news_p_blue">
      This is the second hidden text
      <br/>
      <br/>
      <br/>
      ...
    </p>
    <div class="news_button"><a href="#" class="show_hide"><button class="button_news">Close</button></a></div>
  </div> <!-- END slidingDiv -->
</div> <!-- END news_div_blue -->

＆＃13;

＆＃13;

＆＃13;