如何使用特定元素上的单击事件从div中删除一个类？

Question

我有一个问题，我无法解决，所以这是我的第一个stackoverflow主题！ 我正在做一个成员演示页面，它只显示成员的图片和名称，当我们点击它时，更多信息在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或兄弟成员div之外时，我也希望这样做那将继承.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() { （参见下面的代码）

回调本质上是在函数完成后执行的函数。 在下面的例子中，如果你用简单的英语阅读它，它基本上是这样的：

编辑

单击“显示”链接时，隐藏“显示”链接，并使“成员”框可见。

一旦成员框可见，当点击任何'div'元素时，

• 隐藏'成员'div

• 使'show'链接可见

• 停止对点击的任何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> 

：