javascript - 点击显示不同的内容

Question

我设法做到了，当我点击一个按钮时，一个 div 显示/隐藏，多亏了这个简单的脚本:

$(document).ready(function(){

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

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

});

现在我想对同一页面中的多个 div 执行相同的操作，但如果我使用相同的脚本，它将显示我页面中的每个隐藏的 div，而不仅仅是单击按钮下方的那个。谁能帮助我了解如何修改它？

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

编辑:左边的方 block 应该显示图片，但我还没有上传。

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

});

希望这对您有所帮助。

---

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

  });

});

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

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