.toggle（）を使用して、クリックしたときにdivを表示および非表示にする

Question

jQuery関数を記述して、クリックしてdivを表示/非表示にしようとしています。

<a>タグのクラスはmy-buttonです。 my-divクラスのdivは、最初にページが読み込まれるとdisplay: noneで非表示になります。ユーザーがmy-buttonとmy-divをクリックした場合、私はmy-divと表示したいと考えています。 my-divが表示されている場合、ユーザーがmy-div以外のページのどこかをクリックしたときに非表示にしたいと考えています。これには、my-buttonのクリックも含まれます。

<a class="my-button">Click me!</a> 
<div class="my-div">Show Me or Hide Me!</div> 

私は.toggle()機能を何も使用せずに使用しようとしました。 my-buttonをクリックした後にmy-divは表示されません。 .toggle()を.show()に置き換えた場合、my-buttonを再度クリックしても、ページ上のどこかをクリックすると、my-divが表示され、非表示になります。

$(document).mouseup(function(e) { 
     var $container = $(".my-div"); 

     $(".my-button").click(function(){ 
      $container.toggle(); 
     }); 

     if (!$container.is(e.target) && $container.has(e.target).length === 0) { 
      $container.hide(); 
     } 
}); 

私が望むものを達成するための最良の方法は何でしょうか。

Answer 1

これはあなたが探しているものですか？

$(document).mouseup(function(e) { 
 
    var $container = $(".my-div"); 
 
    if (!$container.is(e.target) && !$(".my-button").is(e.target) && $container.has(e.target).length === 0) { 
 
    $container.hide(); 
 
    } 
 
}); 
 

 
$(".my-button").click(function() { 
 
    $(".my-div").toggle(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button class="my-button">Click me!</button> 
 
<div class="my-div">Show Me or Hide Me!</div>

Answer 2

あなたが適切にボタンにイベントを添付して非表示にしたり表示するためにtoggle()を使用する必要がありますdiv

$(document).ready(function(e) { 
 
    $(".my-button").click(function(e){ 
 
     $(".my-div").toggle(); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<a class="my-button">Click me!</a> 
 
<div class="my-div">Show Me or Hide Me!</div>

Answer 3

まず、私はショーをしようとするだろう/ボタンをクリックするだけで隠れる これを試してみてください。まず第一に、あなたのボタンあなたが好きにIDを変更することができ、ID =「show_hide」とあなたのdivのid =「my_div」

$('#show_hide').click(function (e) { 
     var x = document.getElementById('my_div'); 
     if (x.style.display === 'none') { 
      x.style.display = 'block'; 
     } else { 
      x.style.display = 'none'; 
     } 
    }); 

を与えるが、私は場合にこれをお勧めしますが、他の要素を与えたいですこの機能

ない同じクラスだが別の方法としては、ボタン以外どこにも他のクリックしたときに、これはあなたが以下の機能を使用することができるはず、それが消えるように追加することができます

$(document).ready(function(){ 

    $(document).mousedown(function(e){ 
    var x = document.getElementById('my_div'); 
    if(e.button == 1) { 
     var isHovered = $('#my_div').is(":hover"); 
     if (!isHovered) { 
      x.style.display = 'none'; 
     } 
    } 

    }); 
});