javascript - 複数のボタンから単一の div を表示/非表示

Question

show_div クラスを切り替えるには、次の js があります。

$(document).ready(function(){

  $(".slidingDiv").hide();
  $('.show_div').show();

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

show_div クラスを呼び出す次の html があります。

<div>
<a href="#" data-color="red" class="show_div"><img src="../red.png" /></a>
<a href="#" data-color="blue" class="hide_div"><img src="../blue.png" /></a>
</div>

red.png リンクをクリックすると、show_div が表示されます。blue.png リンクをクリックしたときに show-div を非表示にする方法がわかりません。

blue.png にクラスを追加して show_div を非表示にすると、代わりに blue.png が非表示になります。red.png は、show_div の表示/非表示を切り替える必要があります。blue.png は show_div が非表示であることを確認する必要があります。

追加されたコード:

<div class="slidingDiv">
<div class="show_div">
<a onClick="window.open('listing.html','_blank');">this is red</a>
</div>
</div>

Answer 1

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

タグにイベントを添付する必要があります。現在非表示にイベントはありません

Answer 2

試す：

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

DEMO FIDDLE