jQuery body 点击问题答案

【问题标题】：jQuery body click problemjQuery body 点击问题
【发布时间】：2010-11-09 10:08:26
【问题描述】：

我有一个 div 我想在点击外部时隐藏它。

它几乎可以工作，除了按钮类每两次更改一次。

我单击按钮，添加了活动按钮类并且下拉列表向下滑动，我单击下拉列表之外的某个位置，它向上滑动并且按钮类返回到它的原始状态。但是，当我重复此操作时，不会添加按钮类“isActive”。

函数如下：

function toggleSelectGroupList(){
    $('#groupListSortby').slideToggle(30);


    $('body').click(function(){  
        $('#groupListSortby').click(function(e) {    e.stopPropagation();   })
        $('#groupListSortby').hide(); 
        $('.sortFriends .btngrey .gfx').toggleClass('isActive');
        $('.sortFriends .btngrey a').toggleClass('isActive');
    }); 
}

标记：

<div class="sortFriends">

<div class="btngrey">
    <span class="gfx"></span>
    <a onClick="toggleSelectGroupList()">All friends</a>
</div>

<div class="dropdownList" id="groupListSortby">
    <ul>
        <li class="isActive">
            <span class="gfx"></span>
            <a href="#">All friends</a>
        </li>
        <li>
            <a href="#">Recently added</a>
        </li>
        <li class="last">
            <a href="#">The Railers</a>
        </li>
    </ul>
</div>

</div>

【问题讨论】：

标签： javascript javascript-events jquery

【解决方案1】：

您应该从一开始就绑定click 处理程序，并且传播停止也应该立即绑定，总体而言是这样的：

$(function() {
  $(".sortFriends .btngrey a").click(function(e) {
    $('#groupListSortby').slideToggle(30);
    $('.sortFriends .btngrey .gfx, .sortFriends .btngrey a').toggleClass('isActive');
    e.stopPropagation();
  });
  $('#groupListSortby').click(function(e) {
    e.stopPropagation();   
  });
  $('body').click(function(){  
    $('#groupListSortby').hide(); 
    $('.sortFriends .btngrey .gfx, .sortFriends .btngrey a').removeClass('isActive');
  }); 
});

为了匹配，你的 <a> 不应该再有一个 onclick 内联了，这样就可以了：

<div class="btngrey">
    <span class="gfx"></span>
    <a href="#">All friends</a>
</div>

You can test it out here.

【讨论】：

有效！但是有一个问题，我有一个输入字段，点击它时，div 没有向上滑动？
@Johan - 我没有关注，<input> 字段在哪里？（id 是否有 return false 或 stopPropagation()？）

【解决方案2】：

你能发布 HTML 代码吗？可能是您隐藏了比您想要的更多的元素。或者为什么你有这么多选择器：'.sortFriends .btngrey .gfx'

【讨论】：

【解决方案3】：

问题可能是您将单击处理程序附加到另一个单击事件内的正文中，而在正文单击事件中您附加了另一个事件。每次点击都会发生这种情况。你确定要这样做吗？尝试在 $(window).load 中附加事件。

【讨论】：

【解决方案4】：

从 toggleSelectGroupList 函数中移除该函数并放入 $(document).ready(function () ...

$('body').click(function(){  
    $('#groupListSortby').click(function(e) {    e.stopPropagation();   })
    $('#groupListSortby').hide(); 
    $('.sortFriends .btngrey .gfx').toggleClass('isActive');
    $('.sortFriends .btngrey a').toggleClass('isActive');
});

【讨论】：