在元素外部单击时如何使 toggleClass() 工作答案

【问题标题】：How to make toggleClass() work when clicked outside of an element在元素外部单击时如何使 toggleClass() 工作
【发布时间】：2013-12-12 23:58:09
【问题描述】：

我创建了一张地图，其中包含特定位置的点（.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>

【问题讨论】：

请在发帖前多研究一下。 stackoverflow.com/questions/152975/…

标签： javascript jquery class

【解决方案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');
     }
});

【讨论】：

【解决方案2】：

试试这样的：

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

任何时候您单击具有“节点”类的元素时，都会在您单击的特定节点内找到具有“类 group-dealer”的元素并切换其可见性。您不必使用 display:none 创建一个“隐藏”类；并打开和关闭该课程。 jQuery .toggle() 会自动为你切换可见性。

【讨论】：