如何在點擊按鈕後再次顯示和隱藏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) - 我被更改了代碼，所以你可以在代碼片段中看到它。