0

2 つの jquery 関数を使用して、ページに複数のポップアップを表示しようとしています。そのうちの 1 つは、ポップアップを開くボタンです (ポップアップをボタンの隣に簡単に配置できるように、ボタン自体の内部にネストされています)。もう 1 つの機能は、ポップアップ (ネストされた div 内にある) を閉じるボタンです。

問題は、最初のボタンを構成する div がその機能を開いているポップアップに拡張し、ポップアップを閉じるたびに再び開くようにすることです。（または、ポップアップから開くボタンのネストを解除した後、物事が機能し始めたため、少なくともそれが機能すると思います）

これがjavascriptのコードです

jQuery(document).ready(function(){

$(".button_open").click(function()
{
$(this).children().css("display","inline");
});

$(".button_close").click(function()
{
$(".pop-up").css("display","none");
});

});

HTML

<div class="button_open">
 <div class="pop-up">
  <div class="button_close">X</div>
Text
 </div>
</div>

ページには、それぞれが異なるものを含む複数のポップアップが表示されます。可能であれば、大量の機能を使用するのではなく、これら 2 つの関数ですべての開閉を実行したいと考えています。

基本的に、ネストされたdiv内で閉じるボタンを機能させる方法があるかどうか知りたいです

4

1 に答える 1

0

閉じるボタンをクリックすると、親もクリックされます。次のようにコードを作成してみてください。

$(".button_close").click(function(event)
{
    $(".pop-up").css("display","none");
    event.stopPropagation();
});

stopPropagation関数は、親へのイベントのバブリングを防ぎます。次に、それは親にバブルしてはならず、親のクリックの発火を引き起こしてはなりません。それが役に立たない場合は私に知らせてください。

于 2013-02-28T17:58:47.320 に答える