0

我的网站上有一个元素，它看起来像这样：

<div class="nw_help"><div class="nw_help_content">...</div></div>

容易的东西。在 nw_help:hover 上使用 CSS，nw_help_content 变得可见。为了也支持触摸屏，我编写了以下内容：

$(document).ready(function() {
    $('.nw_help').click(function() {
        $(this).find(".nw_help_content").css('visibility', 'visible');
    });
});
$(document).ready(function() {
    $('.nw_help_content').click(function() {
        $(this).css('visibility', 'hidden');
    });
});

第一个功能完美无缺，第二个根本不想工作。我检查了 $('.nw_help_content').css('visibility', 'hidden'); 在浏览器的控制台中工作，它是。

有任何想法吗？

非常感谢您的回答。

编辑：现在它击中了我：第一个功能在单击 nw_help_content 时也被触发，它“中和”了第二个功能。但是如何预防呢？

4

4 回答 4

1

我相信如果您在页面渲染中隐藏了可见性，则该元素永远不会被渲染。您将需要事件委托：

$(document).ready(function() {
    $('.nw_help').click(function() {
        $(this).find(".nw_help_content").css('visibility', 'visible');
    });


    $(document).on('click', '.nw_help_content', function() {
        $(this).css('visibility', 'hidden');
    });
});

此外，只需要一个 DOM 就绪语句。

演示：http: //jsfiddle.net/7sM3L/4/

于 2013-06-19T23:16:14.130 回答
0

我建议远离直接的 CSS 规则操作。仅使用 jQuery show 和 hide 将提供更可靠/更可靠的结果。

$(document).ready(function() {
    $('.nw_help').click(function() {
        $(this).find('.nw_help_content').show();
    });
});
$(document).ready(function() {
    $('.nw_help_content').click(function() {
        $(this).hide();
    });
});
于 2013-06-19T23:18:26.017 回答
0

它实际上正在工作/因为 div 是嵌套的，所以你都是事件触发并且 div 被隐藏并在同一次点击时显示。改为使用toggle。

 $(document).ready(function() {
        $('.nw_help').click(function() {
            $(this).find(".nw_help_content").toggle();
        });
    });

看看小提琴

于 2013-06-19T23:25:37.287 回答
0

正如 Zenith 所说，这是由于事件冒泡......另一个解决方案是将事件仅绑定到外部容器并简单地检查可见性：

$(document).ready(function() {
    $('.nw_help').click(function() {
        var content = $(this).find('.nw_help_content');
        if(content.css('visibility') == 'hidden') {
            content.css('visibility','visible');
        } else {
            content.css('visibility','hidden');
        }
    });
});
于 2013-06-19T23:30:19.750 回答