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

How to make toggleClass() work when clicked outside of an element

本文关键字：外部 单击 工作 元素 何使 toggleClass      更新时间：2023-09-26

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

这是我目前使用的代码，非常适合使用.field name字段接点作为开/关切换：

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

任何时候单击类为"node"的元素时，都会在单击的特定节点内找到类为"class group dealer"的元素，并切换其可见性。您不必创建一个带有display:none的"隐藏"类；并打开和关闭该类。jQuery.thoggle（）将自动为您切换可见性。

相关文章：