Question

我创建了一个地图，其中包含特定位置的点（.field-name-field-pin-point），点击这些点后，它们会打开一个包含更多相关信息的框。问题是这些点很小，所以再次点击它们以关闭它们是很烦人的。我只想改变，以便当用户点击“.group-dealer”之外时，将激活toggleClass（隐藏）。

这是我目前正在使用的代码，它非常适合使用.field-name-field-pin-point作为开/关切换：

    jQuery('.node-201 .field-name-field-pin-point').click(function() {
        jQuery(this).siblings('.group-dealer').toggleClass('hidden');/* use toggleClass if more appropriate*/
});

以下是基本的HTML布局：

<div class="node-201">
    <div class="group-dealer">...</div>
    <div class="field-name-field-pin-point">...</div>
</div>

Answer 1

尝试委派事件并使用e.target来解决问题

jQuery(document).click(function(e) {
     if( $(e.target).hasClass('field-name-field-pin-point')) {

          // your code here
     } else {
          // Add the hidden class if clicked outside
          jQuery('.node-201 .field-name-field-pin-point').addClass('hidden');
     }
});

Answer 2

尝试这样的事情：

$(function() {
    $('.node').click(function() {
        $(this).find('.group-dealer').toggle();
    })
});

每当您点击具有“node”类的元素时，您将在特定节点内找到具有“class group-dealer”的元素，并单击它并切换其可见性。您不必使用display：none创建“隐藏”类;并打开和关闭该课程。 jQuery .toggle（）将自动为您切换可见性。

如何在元素外部单击时使toggleClass（）工作

2 个答案: