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之外或在sibling成员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');
    }
});

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

1 个答案: