Question

我想通过添加额外的课程addClass("open");然后使用css在活动open课程时显示它们来显示隐藏的div。

$(".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) - 我更改了代码，以便您可以在代码段中看到它。

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

1 个答案: