Javascript jQuery主体单击问题

我有一个div，我想在单击它的外部时隐藏它

它几乎可以工作，除了button类每两次只更改一次

我点击按钮，激活的button类被添加，下拉列表向下滑动，我点击下拉列表之外的某个地方，它向上滑动，button类返回到它的原始状态。但是，当我重复此操作时，button类“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>

---

你能发布HTML代码吗？

---

这可能是因为您隐藏的元素比您想要的要多。或者为什么有这么多选择器：'.sortFriends.btngrey.gfx'

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

您应该从一开始就绑定单击处理程序，传播停止也应该立即绑定，如下所示：

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

---

要匹配，您的。

将该函数从toggleSelectGroupList函数中删除，并放入$document.readyfunction

---

它起作用了！但有一个问题，我有一个输入字段，当点击它时，div没有向上滑动？@Johan-我没有跟上，字段在哪里？一路上我是否有一个返回错误或停止的标记？

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

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