jQuery проблема с щелчком тела

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

Удаляет функцию из функции toggleSelectGroupList и добавляет $ (документ) .ready (function () ...

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

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>

Вы можете проверить это здесь .

Answer 4

Не могли бы вы опубликовать HTML-код?Возможно, вы прячете больше элементов, чем хотите.Или почему у вас так много селекторов: '.sortFriends .btngrey .gfx'