1

私は、次のように、いつでもページ上に画像と共有ボタンを備えた数十のオブジェクトを持っています。

<li class="entry" id="sjDDulC8wt"> 
    <img src="sjDDulC8wt.jpg" />
    <div class="entry_actions">
    <ul class="entry_actions">
        <li class='share_it'><a onclick='javascript: showShare("sjDDulC8wt");' 
        onblur='javascript: hideShare("sjDDulC8wt")' target='_self' 
        title='Share It' class='share_it'>o</a>
        </li>
    </ul>
    <div class="share_options_container"style="display:none;">
        <ul>
            <li><a href="#" class="facebook">F</a></li>
            <li><a href="#" class="twitter">T</a></li>
            <li><a href="#" class="pinterest">X</a></li>
        </ul>
    </div>
</div>

この関数は、 ulshowShare()内のアンカータグをクリックすると、ページの特定の要素内のshare_options_containerdivを開くだけです。entry_actionsクリックすると、hideShare()関数が非表示になっているはずです。

function hideShare(id){
$('#' +id+'.share_options_container').hide();
}

アンカータグをクリックすると、対応する共有コンテナdivが完全に表示されます。クリックしても何も起こりません。私はまた、別の同様の質問で見つけたこのコードを試しました：

$("body").click(function(){ $(".share_options_container").fadeOut(200); });

ただし、アンカーの1つをクリックすると、この関数はすぐにフェードアウトを開始するため、フェードを非表示に変更すると、コンテナーはまったくポップアップしません。

hideShare()アンカータグをクリックしたときに実際にトリガーされるように、元の関数を関連付けることができるイベントはありますか？そうでない場合は、2番目の関数を変更して、表示しようとしている特定のコンテナーがポップアップするとすぐに非表示にならないようにすることはできますか？

4

3 に答える 3

1

HTML:

<li class='share_it'><a href="javascript:;" title='Share It' class='share_it'>o</a>

JS:

$(".share_it a").click(function(){
    $(this).closest(".entry").find(".share_options_container").show();                
    })
$(".share_options_container").mouseleave(function(){
    $(this).hide();              
    })

デモ ： http: //jsfiddle.net/JP2Vx/2/

于 2012-06-28T22:33:31.800 に答える
1

アンカーをクリックしたときに、クリック イベントがドキュメントにバブリングしないようにする必要があります。

だから試してみてください

$(".share_it a").click(function(e){
    e.stopPropagation(); // this line stops the bubbling..
    showShare( $(this).closest(".entry").attr("id") );                
});
$('body').click(function(){
    $(".share_options_container").hide();
});
于 2012-06-28T23:11:03.857 に答える
0

わかりましたので、次のようなものがあるとします (各 をランダムに変更しましidたが、無視してもかまいません。onclick=""またはのようなマークアップにインライン ハンドラーがないことに注意してくださいonblur="")。

HTML

<ul>
    <li class="entry" id="sjDDulC8wt">
        <img src="http://goo.gl/UohAz" />
        <div class="entry_actions">
            <ul class="entry_actions">
                <li class='share_it'>
                    <a href="#" title='Share It' class='share_it'>Open Options Container</a>
                </li>
            </ul>
            <div class="share_options_container non-displayed">
                <ul>
                    <li><a href="#" class="facebook">F</a></li>
                    <li><a href="#" class="twitter">T</a></li>
                    <li><a href="#" class="pinterest">X</a></li>
                </ul>
            </div>
        </div>
    </li>
    <li class="entry" id="sjDDulC8wtf">
        <img src="http://goo.gl/UohAz" />
        <div class="entry_actions">
            <ul class="entry_actions">
                <li class='share_it'>
                    <a href="#" title='Share It' class='share_it'>Open Options Container</a>
                </li>
            </ul>
            <div class="share_options_container non-displayed">
                <ul>
                    <li><a href="#" class="facebook">F</a></li>
                    <li><a href="#" class="twitter">T</a></li>
                    <li><a href="#" class="pinterest">X</a></li>
                </ul>
            </div>
        </div>
    </li>
    ... More rows ...
</ul>

次に、これを行うことができます：

CSS

.non-displayed {
    display:none;
}

jQuery

$(document).ready(function(){
    var $entries = $('.entry');

    function toggleShare(){
        $(this)
            .parents('.entry')
            .find('.share_options_container')
            .toggleClass('non-displayed');
    }

    $entries.find('a.share_it').bind('click', toggleShare);
    $entries.find('div.share_options_container').bind('mouseleave', toggleShare);
});

http://jsfiddle.net/userdude/vg3n5/1

idそのため、ハンドラー呼び出しなどで送信しないでください。

mouseleavemgraphの回答から盗んだアイデアに注意してください。

于 2012-06-28T23:10:34.323 に答える