가장 근접한 요소 토글

Question

.event 블록을 클릭하여 요소를 토글하려고합니다. 불행히도 그것은 대상 요소를 클릭 할 때만 작동합니다. 을 클릭하면 metadata을 토글해야합니다.

$(".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>