Q&A
jQueryのoffset()を使ってboxの表示位置をコントロールするコードを書いてみているのですが
特定の条件で、表示位置がずれてしまいます。
書いたコードは下記の通りです。
<html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> </head> <body> テスト <div id="win1" style="border:solid; height: 300px; width: 400px; position: absolute; top:50px; left:100px; "> ほげほげ <div> <span> <button class="show_win2_button">表示1</button> </span> </div> <div style="position:relative; top:20px; left:20px;"> <span> <button class="show_win2_button">表示2</button> </span> </div> <div style="position:relative; top:100px; left:70px;"> <span> <button class="show_win2_button">表示3</button> </span> </div> <div style="position:relative; top:160px; left:250px;"> <span> <button class="show_win2_button">表示4</button> </span> </div> </div> <div id="win2" style="border:solid; height: 400px; width: 200px; position: absolute; top:0px; left:0px; display:none; z-index:10; background-color:#EDF7FF;"> ぱよぱよ <div><button id="close_button">閉じる</button></div> </div> <script> $(function() { $('.show_win2_button').on('click', function () { self = this; $button = $(self).parent(); $win2 = $('#win2'); $win2.offset({ top: $button.offset().top + $button.height(), left: $button.offset().left + $button.width() }); $win2.show(); }); $('#close_button').on('click', function() { $('#win2').hide(); }); }); </script> </body> </html>
表示1から表示4までのボタンを押すと、そのボタンの右下の位置にid="win2"のboxが表示されるという意図のものです。
表示1から表示4までのボタンだけを押し続けているうちは、うまく機能しているように見えます。
しかし、id="win2"のbox内に作った「閉じる」ボタンをクリックしてid="win2"のboxを非表示にしたあと、
再度、表示1から表示4のいずれかのボタンを押すと、win2のboxの表示位置が右下の方へずれて表示されてしまいます。
「閉じる」ボタンでは jQuery の hide() を呼んでいるだけなので、その後、win2のboxを表示したときに
右下へとずれてしまう理由が分からず、困っております。
恐縮ですが、解決方法を教えていただければ幸いです。
回答1件
0
ベストアンサー
恐らく、cssのtopやleftと、jQueryのoffsetのtopやleftを混同されていると思います。
また、win2ボックスに関しては、表示位置を柔軟にするためにposition: fixed;にしてあります。position: fixed;にすることによって、ブラウザの画面左上を基準にできるため、jQueryのoffsetと相性が良くなるかと思います。
やりたいことがあっているか分かりませんが、参考程度にどうぞ。一応軽くコメントを入れてあります。
html
1<html> 2<head> 3 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> 4</head> 5<body> 6 テスト 7 8 <div id="win1" style="border:solid; height: 300px; width: 400px; position: absolute; top:50px; left:100px; "> 9 ほげほげ 10 <div> 11 <button class="show_win2_button">表示1</button> 12 </div> 13 <div style="position:relative; top:20px; left:20px;"> 14 <button class="show_win2_button">表示2</button> 15 </div> 16 <div style="position:relative; top:100px; left:70px;"> 17 <button class="show_win2_button">表示3</button> 18 </div> 19 <div style="position:relative; top:160px; left:250px;"> 20 <button class="show_win2_button">表示4</button> 21 </div> 22 </div> 23 24 <div id="win2" style="border:solid; height: 400px; width: 200px; position: fixed; top:0px; left:0px; display:none; z-index:10; background-color:#EDF7FF;"> 25 ぱよぱよ 26 <div><button id="close_button">閉じる</button></div> 27 </div> 28 29 <script> 30 $(function () { 31 $('.show_win2_button').on('click', function () { 32 $button = $(this); //親要素ではなく直接ボタン要素を取ればいいのでは？と思いました。 33 $win2 = $('#win2'); 34 $win2.css({ //offsetではなく、cssのtop、leftを変更したいのかと。 35 top: $button.offset().top + $button.outerHeight(), //「outer」がつくと、paddingやborderも含めた値を取得できます。 36 left: $button.offset().left + $button.outerWidth() 37 }); 38 $win2.show(); 39 }); 40 $('#close_button').on('click', function () { 41 $('#win2').hide(); 42 43 }); 44 }); 45 </script> 46</body> 47</html> 48
投稿2019/12/06 10:12
編集2019/12/06 10:18
総合スコア144
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/12/09 09:01