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>

showShare()当我单击entry_actionsul内的锚标记时，该函数只是在页面的特定元素内打开 share_options_container div。当我单击它时，该hideShare()功能应该隐藏它。

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

当我单击锚标记时，相应的共享容器 div 完美显示。当我单击关闭时，没有任何反应。我也试过这段代码，我在另一个类似的问题上找到了它：

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

但是，当我单击其中一个锚点时，此功能会立即开始将其淡出，因此如果我将淡入淡出更改为隐藏，则容器甚至根本不会弹出。

是否有一个事件我可以将我的原始hideShare()函数与之关联，以便当我单击锚标记时它会实际触发？如果不是，我是否可以修改第二个函数，使其不会在弹出时立即隐藏我要显示的特定容器？

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

好的，假设你有这样的东西（我已经随机修改了 each id，但无论如何你都可以忽略它，请注意标记中没有内联处理程序，如onclick=""or 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通过处理程序调用或诸如此类的方式发送。

请注意，mouseleave我从 mgraph 的答案中窃取的想法。

于 2012-06-28T23:10:34.323 回答