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

Question

我创建了一个地图，该地图具有用于特定位置的点（.field-name-field-pin-point），单击这些点时，它们会打开一个包含有关此信息的框。 问题在于这些点很小，因此再次单击它们以关闭框很烦人。 我只想进行更改，以便当用户在“ .group-dealer”之外单击时，将激活toggleClass（hidden）。

这是我当前正在使用的代码，非常适合将.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();
    })
});

每当您单击具有“节点”类的元素时，都会在特定节点内找到具有“类组经销商”元素的元素，并单击该元素并切换其可见性。 您不必使用display：none创建一个“ hidden”类。 并打开和关闭该类。 jQuery .toggle（）将自动为您切换可见性。