1

ボタン（ボタンA）をクリックすると、jqueryを使用して、このボタンのまったく同じ位置（位置：絶対）に画像が表示されます。

このフィドルを参照してください

このボタン（ボタンA）をもう一度クリックして画像を非表示にしたいのですが、画像がボタンの上にあるため方法がわかりません。

私は他の解決策を見つけました（jqueryを増やすか、目に見えない画像ボタンを使用します）が、よりエレガントな方法を見つけたいと思います。

画像の下にあるボタンをターゲットにするにはどうすればよいですか?

Jqueryコード:

$(document).ready(function() {
    $('#button').css('cursor', 'pointer');
    $('#button').click(function() {
        if ($('#image_1').css('visibility') == 'hidden') {
            $('#image_1').css('visibility', 'visible');
        } else {
            $('#image_1').css('visibility', 'hidden');
        }
    });
});

CSS :

#button
{
    width:100px;
    background-color:#666666;
    height:25px;
    position:absolute;
    left:10px;
    top:10px;
}

#image_1
{
    width:100px;
    background-color:#666666;
    height:25px;
    position:absolute;
    left:10px;
    top:10px;
    visibility:hidden;
}

html

<div id=main>
    <div id="button">
    </div>
    <div id="image_1">Hello World!
    </div>
</div><!-- main -->

@closure @Justin John @Jai @Robz @Adam @Happy Singh @Ross Dargan @Wouter de Kort @Viral Patel @Ruben Stolk 興味深い回答をありがとう。本当に良いものもあるから選ぶのは難しい。Adam の回答を選択したのは、それが最も単純だからです (toglle jQuery と css クラスを使用するだけです)。あなたの答えがより良いと思う場合は、ここにあなたの議論を投稿してください。

4

11 に答える 11

1

JavaScriptを次のように変更するだけです

$(document).ready(function() {
$('#button').css('cursor', 'pointer');
$('#button').click(function() {
    if ($('#image_1').css('visibility') == 'hidden') {
        $('#image_1').css('visibility', 'visible');
    } else {
        $('#image_1').css('visibility', 'hidden');
    }
});
$('#image_1').click(function(){
          $('#image_1').css('visibility', 'hidden');
});


});
于 2012-12-21T11:56:36.383 に答える
1

ボタン div 内に画像 div を配置する方が簡単です。jQuery のトグル機能を使用して、画像の表示/非表示を切り替えることもできます。

<div id=main>
    <div id="button">
       <div id="image_1">Hello World!
       </div>    
    </div>
</div><!-- main -->    ​

$(document).ready(function() {
    $('#button').css('cursor', 'pointer');
    $('#button').click(function() {
        $('#image_1').toggle();
    })
});​

ここにそれを示すフィドルがあります：http://jsfiddle.net/jBaWN/2/

于 2012-12-21T11:51:21.793 に答える
1

このフィドルは、それがどのように簡単に実行できるかを示しています: http://jsfiddle.net/33aus/1/

画像の css を display:none に変更したことに注意してください。

$(document).ready(function() {
    $('#button').css('cursor', 'pointer');
    $('#button').click(toggleVisiblity);
    $('#image_1').click(toggleVisiblity);
});
function toggleVisiblity()
{    
    $('#button').toggle();
    $('#image_1').toggle();
}​
于 2012-12-21T11:51:22.333 に答える
1

更新されたフィドルhttp://jsfiddle.net/eCCR6/8/を参照してください

$(document).ready(function() {
    $('#button').css('cursor', 'pointer');
    $('#button').click(function() {
        if ($('#image_1').css('visibility') == 'hidden') {
            $('#image_1').css('visibility', 'visible');
        }
    });
    $('#image_1').click(function() {
        if ($('#image_1').css('visibility') == 'visible') {
            $('#image_1').css('visibility', 'hidden');
        }
    });


});
于 2012-12-21T11:51:44.603 に答える
1

クラスを#buttonと の両方に追加して、クリック イベントを と の両方にバインドしました。どちらかをクリックすると、画像の表示/非表示が切り替わります。#imagebutton

また、display: none代わりに使用するvisibility: hidden場合は、jQuery のtoggle()を使用できます。これにより、数行のコードを節約できます。

フィドルを見る

$(document).ready(function() {
    $('.button').click(function() {
        $('#image_1').toggle();
    });
});
于 2012-12-21T11:53:04.743 に答える
1

フィドルhttp://jsfiddle.net/eCCR6/2/を参照してください。

私はこのような関数を作成し、両方にバインドしました:

function clickFn() {
    if ($('#image_1').css('visibility') == 'hidden') {
        $('#image_1').css('visibility', 'visible');
    } else {
        $('#image_1').css('visibility', 'hidden');
    }
}

別のモデルは、イベントを親 div にバインドすることmainです。

フィドルhttp://jsfiddle.net/eCCR6/18/を参照してください

于 2012-12-21T11:48:51.777 に答える
1

これを試して、マウスダウンでボタンをトリガーする必要があると思いますimg 1：

  $(document).ready(function() {
    $('#button').css('cursor', 'pointer');
    $('#button').click(function() {
        if ($('#image_1').css('visibility') == 'hidden') {
            $('#image_1').css('visibility', 'visible');
        } else if ($('#image_1').css('visibility') == 'visible') {
            $('#image_1').css('visibility', 'hidden');
        }

        $('#image_1').mousedown(function(){
           $('#button').click();
        });
    });
});

ここでは、else if チェックを実行し、マウスダウン イベントのボタン クリックをトリガーします#image_1。

フィドルをチェックアウト: http://jsfiddle.net/eCCR6/16/

于 2012-12-21T11:59:47.787 に答える
1

次のようなものはどうですか：

$(document).ready(function() {
    $('#button').css('cursor', 'pointer');
    $('#button').click(function() {
        $('#image_1').show();
    });

    $('#image_1').click(function() {
       $(this).hide();
    });
});​

このデモを確認してください: http://jsfiddle.net/viralpatel/R5MVD/1/

于 2012-12-21T11:49:35.427 に答える
1

fiddleでこのように両方のセレクターを組み合わせることもできます。

$('#button, #image_1').click(function() {
 // Your code 
});
于 2012-12-21T12:01:10.983 に答える
0

jquery .prev() または .next() 関数を使用する

于 2012-12-21T11:47:39.657 に答える
0

pointer-events画像がクリックに反応するようにする (画像の下に複数のボタンがある場合は機能しません) 代わりに、 CSS プロパティを使用して画像をクリックに反応しないようにすることができます。次のようになります。

#image_1
{
  pointer-events: none;
}

フィドルを参照してください: http://jsfiddle.net/eCCR6/31/

これにより、クリックが画像を介して下のボタンに直接渡されます。

この方法の欠点は、画像がマウスの動きに反応しなくなることですが、この場合は問題ありません。

于 2013-12-24T05:43:27.430 に答える