Как я могу удалить класс из div, используя события click для определенных элементов?

Question

У меня проблема, которую я не могу исправить, поэтому вот моя первая тема для стекирования! Я делаю страницу презентации участников, которая показывает только изображение и имя участников, и когда мы нажимаем на него, в div появляется больше информации, а div растет в размере, используя класс, добавленный с jquery для запуска анимации. Пока показ контента работает, но по какой-то причине я не нахожу, что не могу закрыть div участника, удалив его класс. Вот html, css и jquery. Я также работаю над рубиновой средой.

<div class="member"> 
<div class="profile"> 
    <!-- name and picture of the member --> 
</div> 

<!-- this div is hidden with css --> 
<div class="member-presentation"> 
    <!-- content --> 

    <!-- a close button to remove the .active-member class --> 
    <button class="close"><i class="fa fa-times-circle-o" aria-hidden="true"></i></button> 
</div> <!-- member-presentation --> 

Я использую SASS для отображения скрытого текста, когда добавляется правильный класс.

.member { 
    border: 0; 
    width: 235px; 
    transition: all 200ms ease-out; 

    .member-presentation { 
    display: none; 
    } 
} 
.member.active-member { 
    width: 800px; 

    .member-presentation { 
     display: block; 
    } 
} 

И затем появляется jquery, который является частью, которая не будет работать.

var $member = $('div.member'); 
var member = { 
    showPresentation : function() { 
     if(!$member.hasClass('active-member')) { 
      $(this).addClass('active-member'); 
     } 
     else if($member.hasClass('active-member')) { 
      // this is to prevent closing the presentation by clicking anywhere on it 
      $(this).preventDefault(); 
     } 
    }, // attribute showPresentation 

    closePresentation : function() { 
     if($member.hasClass('active-member')) { 
      $('.close').click(function() { 
       $member.removeClass('active-member'); 
      }); 
     } 

    } // attribute closePresentation 
}; // object member 

//execution of the functions 
$member.on('click', member.showPresentation); 
$member.on('click', member.closePresentation); 

Класс не будут удалены по нажатию кнопки закрытия и я не знаю, как заставить его работать ... Я хотел бы, чтобы это произошло, когда мы щелкаем вне элемента div или на дочернем элементе sibling, который наследует класс .active-member, но я понятия не имею, как это сделать ... Я довольно новичок в jquery, поэтому, возможно, решение легко, но я в отчаянии! Любой, кто может мне помочь, станет моим героем!

Answer 1

Это как закрыть DIV, нажав вне его или любого из его братьев и сестер:

// Add click event for closing the div by clicking outside it 
$(document).mouseup(function (e) { 
    if (!myDiv.is(e.target) // if the target of the click isn't the container... 
      && myDiv.has(e.target).length === 0) { // ... nor a descendant of the container 
     myDiv.hide(); 
     $(document).unbind('mouseup'); 
    } 
}); 

Answer 2

Вы могли бы использовать этот трюк, а также для выполнения требуемого действия: , просто используя on и off JQuery функции для добавления/удаления слушателей событий из любой элементы, которые вы так желаете в правильное время, используя функцию обратного вызова, например, как этот: $("#member").show(function() { (см ниже код, например)

обратный вызов по существу функция, которая выполняется после того, какфункция завершена. В моем примере ниже, если вы должны были прочитать его в простом английском языке это по сути будет что-то вроде этого:

EDIT

Когда «шоу» ссылка щелкнул, скрыть «показать» ссылку, и сделайте поле «член» видимым.

Как только коробка член видна, когда нажата любой элемент 'DIV',

• скрыть 'член' ДИВ

• сделать 'шоу' ссылку видна

• прекратить реагировать на любые щелевые элементы, нажатие которых

$("#show").on("click", function() { //add listener 
 
    $("#show").hide(); 
 
    $("#member").show(function() { //callback 
 

 
    $("div").on("click", function() { //callback 
 

 
     $("#member").hide(); 
 
     $("#show").show(); 
 
     $("div").off("click"); //remove listener 
 
    }); 
 
    }); 
 

 
});

#member { 
 
    width: 300px; 
 
    height: 100px; 
 
    background-color: red; 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<a id="show" href='javascript: void(0)'>Show</a> 
 
<div id="member"> Member Presentation <br><br> 
 
    <a id="close" href='javascript: void(0)'>Close</a></div>

: