单击按钮后如何再次显示和隐藏div

Question

我想在单击按钮后显示一个隐藏的 div，方法是添加一个额外的类 addClass("open");，然后在它处于活动状态时使用 css 显示它们 open 类。

$(".btt").click(function(event){
   ($(event.currentTarget).parent().parent()).addClass("open");
});

.surveySummaryList>li .surveySummaryMenu {
  background: rgba(0, 0, 0, 0.6);
  position:absolute;
  left: 100%;
  top: 0;
  display: none;
  color: white;
  width: 100%;
  min-width: 250px;
  z-index: 1001;
}

.surveySummaryList>li.open >.surveySummaryMenu {
  display: inherit;
  transition: all 1s;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<ul class="nav surveySummaryList">
  <li>
    <a href="javascript:" data-bind="click: $root.surveyClicked">
      <span>Name</span>
      <button class=" btt pull-right glyphicon glyphicon-chevron-right"></button>
    </a>
    <div class="surveySummaryMenu">
      <ul class="nav navbar">
        <li>
          <a href="javascript:" data-bind="click: $root.surveyClicked">
             <span> Sub Name </span>
          </a>
        </li>
      </ul>
    </div>
  </li>
</ul>

只有当我点击按钮时，div class= surveySummaryMenu 才会显示，即使我点击这个<a> 标签，它也不应该显示。似乎可以工作，但是在单击按钮后， div .surveySummaryMenu 将永远保留，单击其他位置而不是按钮后如何再次隐藏它？

Answer 1

当要将event对象用于event.currentTarget时，需要将其传递给回调函数。

像这样：

$(".btt").click(function(event) {

工作代码：

$(".btt").click(function() {
  $(this).parent().parent().addClass("open");
});

$('.nav a').click(function(event) {
  event.stopPropagation();
});

$(document).on('click', function() {
  $('.open').removeClass('open');
});

.surveySummaryList>li .surveySummaryMenu {
  background: rgba(0, 0, 0, 0.6);
  position:absolute;
  left: 100%;
  top: 0;
  display: none;
  color: white;
  width: 100%;
  min-width: 250px;
  z-index: 1001;
}

.surveySummaryList>li.open >.surveySummaryMenu {
  display: inherit;
  transition: all 1s;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<ul class="nav surveySummaryList">
  <li>
    <a href="javascript:" data-bind="click: $root.surveyClicked">
      <span>Name</span>
      <button class=" btt pull-right glyphicon glyphicon-chevron-right"></button>
    </a>
    <div class="surveySummaryMenu">
      <ul class="nav navbar">
        <li>
          <a href="javascript:" data-bind="click: $root.surveyClicked">
            <span> Sub Name </span>
          </a>
        </li>
      </ul>
    </div>
  </li>
</ul>

注意顺便说一句，您可以使用$(this) 代替$(event.currentTarget) - 我已更改代码，以便您可以在 sn-p 中看到它。