Question

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

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

简单的东西。在nw_help上使用CSS：hover，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时触发的，它“中和”了第二个函数。但是如何预防？

Answer 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 ready语句。

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

Answer 2

我建议远离直接的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();
    });
});

Answer 3

它实际上正在工作/由于div是嵌套的，所以你们都是事件，并且div被隐藏并显示在同一个点击上。请改用toggle。

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

查看fiddle

Answer 4

正如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');
        }
    });
});

由于某种原因无法隐藏点击元素

4 个答案: