Toggle ближайший элемент

Question

Я пытаюсь переключить элемент при нажатии на .event блок. К сожалению, он работает только при нажатии на целевой элемент. metadata должен переключаться при нажатии на event.

$(".event").on("click", function (event) { 
 
    $(event.target).closest(".metadata").toggle(); 
 
});

.hilight { 
 
    background-color: yellow; 
 
} 
 
.tright { 
 
    text-align: right; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> 
 

 
<div class="event" id="event_100"> 
 
    <div class="row summary"> 
 
     <div class="col-md-3 col-sm-1"> <span class="badge badge-info">special</span></div> 
 
     <div class="col-md-8 col-sm-11">Error excepturi cumque aspernatur amet enim maxime nisi et.</div> 
 
    </div> 
 
    <div class="row metadata"> 
 
     <div class="col-md-4 col-sm-4"> 
 
      <div class="meta-key tright">key</div> 
 
     </div> 
 
     <div class="col-md-8"> 
 
      <div class="meta-value">value</div> 
 
     </div> 
 
     <div class="col-md-4 col-sm-4"> 
 
      <div class="meta-key tright">key</div> 
 
     </div> 
 
     <div class="col-md-8"> 
 
      <div class="meta-value">value</div> 
 
     </div> 
 
    </div> 
 
</div> 
 
<div class="event" id="event_99"> 
 
    <div class="row summary"> 
 
     <div class="col-md-3 col-sm-1"> <span class="badge badge-info">special</span></div> 
 
     <div class="col-md-8 col-sm-11">Error excepturi cumque aspernatur amet enim maxime nisi et.</div> 
 
    </div> 
 
    <div class="row metadata"> 
 
     <div class="col-md-4 col-sm-4"> 
 
      <div class="meta-key tright">key</div> 
 
     </div> 
 
     <div class="col-md-8 col-sm-4"> 
 
      <div class="meta-value">value</div> 
 
     </div> 
 
    </div> 
 
</div> 
 
<div class="event" id="event_98"> 
 
    <div class="row summary"> 
 
     <div class="col-md-3 col-sm-1"> <span class="badge badge-warning">special</span></div> 
 
     <div class="col-md-8 col-sm-11">Error excepturi cumque aspernatur amet enim maxime nisi et.</div> 
 
    </div> 
 
    <div class="row metadata"> 
 
     <div class="col-md-4 col-sm-4"> 
 
      <div class="meta-key tright">key</div> 
 
     </div> 
 
     <div class="col-md-8"> 
 
      <div class="meta-value">value</div> 
 
     </div> 
 
     <div class="col-md-4 col-sm-4"> 
 
      <div class="meta-key tright">key</div> 
 
     </div> 
 
     <div class="col-md-8"> 
 
      <div class="meta-value">value</div> 
 
     </div> 
 
    </div> 
 
</div>

Answer 1

См DOC: http://api.jquery.com/closest/

ближайший() ищет предка, event.target возвращения щелкнул элемент, вы должны использовать вместо:

$(this).find(".metadata").toggle();

$(".event").on("click", function (event) { 
 
    $(this).find(".metadata").toggle(); 
 
});

.hilight { 
 
    background-color: yellow; 
 
} 
 
.tright { 
 
    text-align: right; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> 
 

 
<div class="event" id="event_100"> 
 
    <div class="row summary"> 
 
     <div class="col-md-3 col-sm-1"> <span class="badge badge-info">special</span></div> 
 
     <div class="col-md-8 col-sm-11">Error excepturi cumque aspernatur amet enim maxime nisi et.</div> 
 
    </div> 
 
    <div class="row metadata"> 
 
     <div class="col-md-4 col-sm-4"> 
 
      <div class="meta-key tright">key</div> 
 
     </div> 
 
     <div class="col-md-8"> 
 
      <div class="meta-value">value</div> 
 
     </div> 
 
     <div class="col-md-4 col-sm-4"> 
 
      <div class="meta-key tright">key</div> 
 
     </div> 
 
     <div class="col-md-8"> 
 
      <div class="meta-value">value</div> 
 
     </div> 
 
    </div> 
 
</div> 
 
<div class="event" id="event_99"> 
 
    <div class="row summary"> 
 
     <div class="col-md-3 col-sm-1"> <span class="badge badge-info">special</span></div> 
 
     <div class="col-md-8 col-sm-11">Error excepturi cumque aspernatur amet enim maxime nisi et.</div> 
 
    </div> 
 
    <div class="row metadata"> 
 
     <div class="col-md-4 col-sm-4"> 
 
      <div class="meta-key tright">key</div> 
 
     </div> 
 
     <div class="col-md-8 col-sm-4"> 
 
      <div class="meta-value">value</div> 
 
     </div> 
 
    </div> 
 
</div> 
 
<div class="event" id="event_98"> 
 
    <div class="row summary"> 
 
     <div class="col-md-3 col-sm-1"> <span class="badge badge-warning">special</span></div> 
 
     <div class="col-md-8 col-sm-11">Error excepturi cumque aspernatur amet enim maxime nisi et.</div> 
 
    </div> 
 
    <div class="row metadata"> 
 
     <div class="col-md-4 col-sm-4"> 
 
      <div class="meta-key tright">key</div> 
 
     </div> 
 
     <div class="col-md-8"> 
 
      <div class="meta-value">value</div> 
 
     </div> 
 
     <div class="col-md-4 col-sm-4"> 
 
      <div class="meta-key tright">key</div> 
 
     </div> 
 
     <div class="col-md-8"> 
 
      <div class="meta-value">value</div> 
 
     </div> 
 
    </div> 
 
</div>