-2 
<div class="buttons">
<a  class="showSingle" target="1">Click 1</a>
<a  class="showSingle" target="2">Click 2</a>
<a  class="showSingle" target="3">Click 3</a>
<a  class="showSingle" target="4">Click 4</a>
</div>

<div id="div1" class="targetDiv">Results from click 1</div>
<div id="div2" class="targetDiv">Results from click 2</div>
<div id="div3" class="targetDiv">Results from click 3</div>
<div id="div4" class="targetDiv">Results from click 4</div>​

jQuery(function(){
        jQuery('.showSingle').click(function(){
              jQuery('.targetDiv').hide();
              jQuery('#div'+$(this).attr('target')).show();
        });
});

</p>

これを行うための多くの方法を見つけましたが、設定した方法で機能させることができないようです。.showSingle をクリックするとき、または .targetDiv ボックス内以外のページ上の任意の場所をクリックすると、.targetDiv を非表示にする必要があります。

http://jsfiddle.net/XwN2L/1063/

4

1 に答える 1

0

更新: 本文ではなく html にバインドして、コンテンツ領域の外側でのクリックを修正しました。

これがあなたの関数です。ページの本文がクリックされるたびにトリガーされます。

jQuery('html').click(function(){
    if( !jQuery(event.target).hasClass('targetDiv') ){
        jQuery('.targetDiv').hide();
    }
});

次に、追加する必要もあります

e.stopPropagation();
e.preventDefault();

あなたの最初の機能には、ダブルアクションを防ぎます。(また、関数の引数に e を追加することを忘れないでください)

ここにフィドルがあります： - http://jsfiddle.net/XwN2L/1065

幸運を祈ります。

于 2012-12-01T06:14:48.053 に答える