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

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

这是我目前正在使用的代码，非常适合使用.field name字段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>

...
...

尝试委派事件，并使用

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

---

试着这样做：

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

---

任何时候，当您单击具有“节点”类的元素时，将在特定节点内找到具有“类别组经销商”的元素，您可以单击该元素并切换其可见性。您不必创建一个带有display:none的“隐藏”类；打开和关闭该类。jQuery.toggle（）将自动为您切换可见性。

请在发布之前多研究一下。