Question

在任何给定时间，我都有几十个带有图像和分享按钮的对象，例如：

<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() ul内的锚标记时，entry_actions函数只是打开页面特定元素内的share_options_container div。当我点击它时，hideShare()函数应该隐藏它。

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

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

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

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

是否有一个事件我可以将我原来的hideShare()函数关联起来，以便当我点击锚标记时它会实际触发？如果没有，我可以修改第二个功能，以便它不会隐藏我弹出的特定容器吗？

Answer 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/

Answer 2

单击锚点时，应该停止点击事件冒泡到文档。

所以试试

$(".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();
});

Answer 3

好的，所以说你有这样的东西（我已经随机修改了每个id，但你可以忽略它，但请注意标记中没有内联处理程序，如onclick=""或{{1} }）：

<强> HTML

onblur=""

然后你可以这样做：

<强> CSS

<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>

<强>的jQuery

.non-displayed {
    display:none;
}

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

这就是为什么我说你没有使用处理程序调用发送的$(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); });或诸如此类的东西。

请注意，我从mgraph的回答中偷走了id这个想法。

使用jquery隐藏多个容器

3 个答案: