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

Question

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

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