jQueryを使って領域外のクリックイベントで消えるボックスを複数設定
ウェブアプリケーションなどで、ページ内で特定の操作をする際、
隠していた領域（style="display: none;"）を表示させることはよくあると思います。
（Twitterのフィード上でつぶやく表示など）
その領域の外をクリックすると、該当する領域を非表示（.hide()）する処理を考えてみました。
下記のソースをHTMLドキュメントの中で実行すると実際に動作します。
<!DOCTYPE> <html> <head> <meta http-equiv="Content-Type" content="text/html"; charset="utf-8"> <title>jQuery Click outside Test</title> <style> .content { display: none; width: 400px; height: 80px; } .red { background-color: red; } .green { background-color: green;} .blue { background-color: blue;} </style> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script> var isMouseHover = false; $(document).ready(function(){ $('ul.show-content li').bind('click', function(){ var color = $(this).data('color'); $('div#'+color).toggle(); }); $('div.content').hover(function(){ isMouseHover = true; }, function(){ isMouseHover = false; }); $('body').mouseup(function(){ if(!isMouseHover) $('div.content').hide(); }); }); </script> </head> <body> <ul class="show-content"> <li data-color="red"><a href="javascript:void(0)">Red</a></li> <li data-color="green"><a href="javascript:void(0)">Green</a></li> <li data-color="blue"><a href="javascript:void(0)">Blue</a></li> </ul> <div class="content red" id="red">Red</div> <div class="content green" id="green">Green</div> <div class="content blue" id="blue">Blue</div> </body> </html>
