Question

我在外面点击时想隐藏一个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>

Answer 1

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

Answer 2

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

中

Answer 3

你应该从头开始绑定你的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

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

jQuery正文点击问题

4 个答案: