切换最接近的元素

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/

nearest（）寻找祖先，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>