1

次のコードを使用して、「外側をクリック」して作業を終了しました。

コード全体のjsfiddleは次のとおりです（機能させるには、左側のナビゲーションでjQueryを有効にしてください）。

http://jsfiddle.net/jhacks/ZxBXe/17/

divの表示をクリックすると：

$('div.topIconNew').click(
    function(){
        $(this).siblings('div.topTip').show();
        $(this).siblings('div.topDrop').slideDown(240);

divの外側をクリックすると非表示になります： 

$(document).click(
    function(event){
        $('div.topTip, div.topDrop').hide();
    }
);
$('div.topTip, div.topDrop').click(
    function(event){
        event.stopPropagation();
    }
);

上記の問題は、topIconNew .stopPropagationを追加した後、topTipおよびtopDrop divが開いたら、同じtopIconNewをもう一度クリック（つまりトグル）したり、topIconNewの別のインスタンスをクリックしたりしても閉じないことです。

私が試みた解決策は次のとおりです。

if($('div.topTip, div.topDrop').is(':visible')){
        $('div.topIconNew').click(
            function(){
                 // need to specify only divs currently open to hide
                $('div.topTip, div.topDrop').hide();
            }
        )
    }
    else {
        $('div.topIconNew').click(
            function(event){
                event.stopPropagation();    
            }
        );
    }

topTipとtopDropが表示されている場合にのみ、topIconNewをクリックしたときにtopTipとtopDropを非表示にし、現在開いているtopTip要素とtopDiv要素のみを非表示にするように上記で言いたいです。さらに、何も開いていない場合（elseステートメント）、topIconNewでstopPropagation ...を実行して、div＃wrapper.hide（）がtopIconNew.show（）と競合しないようにします。

現在、elseステートメントは機能しています。これがないと、topIconNew .showと.hideが互いに競合し、機能しません。しかし今、彼らは...

ただし、topTipとtopDropが開いているときに閉じないため、ifステートメントが機能せず、topIconNewをクリックします。さらに、私が抱えている問題の少なくとも1つは、現在開いているtopTipとtopDropを閉じるように指定していないことです（現在、これらのいずれかを閉じるように指示しているだけです）。

ありとあらゆる助けがここに大いに感謝されます。ありがとう！！！

4

1 に答える 1

1

さて、topIconNewに「hide」コードを割り当てないという問題があります。

これはあなたが望んでいたものに少し近いですか？

http://jsfiddle.net/ZxBXe/20/

于 2011-12-15T01:43:23.883 に答える