javascript - jQuery 按类显示隐藏父项

Question

我无法根据单击列表项的按钮来切换(显示/隐藏)div。

当我尝试时，它会同时影响所有 div。这是我的代码。我想要切换每个元素的基础。

<div class="list-item">
    <div class="list-content">
        <div class="list-updates">
            <a href="#" class="list-avatar"><img
                        src="images/avatar/avatar_<?php echo ( $i <= 8 ? '0' : NULL ) . $avatars[ $i ] ?>.jpg"
                        alt="user-avatar" width="40"
                        height="40"></a>
            <a href="#"><i class="material-icons"><?php echo get_icon( $update[ $i ] ) ?></i></a>
        </div>
        <div class="item-title"><a href="#"><?php echo $questions[ $i ] ?></a>
        </div>
        <div class="ans-box">
            <div class="ans-count"><?php echo $ans[ $i ] ?></div>
            <span><i class="material-icons meta-info-btn">keyboard_arrow_down</i></span>
        </div>
    </div>

    <div class="metas">
        <div class="update-info"><a href="#">commented</a> 1 hour ago in <a href="#">Plugins</a> by
            <a href="#">gurjyot</a>
        </div>
        <div class="counters">
            <span class="votes"><i class="material-icons">arrow_upward</i> +1245</span>
            <span class="views"><i class="material-icons">remove_red_eye</i> 50.2k</span>
        </div>
    </div>
</div><!-- list-item -->

$('.list-content .meta-info-btn').click(function () {
    alert('Clicked and found!');
    $(this).closest('.metas').slideToggle();
});

Answer 1

尝试 float 到最近的顶部父级 div，然后使用查找。

$(this).closest('.list-item').find(".metas").toggle();

// add some data...

var x = "";

for(var i = 0; i < 5; i++){
  x += "<div class='list-item'>\
	<div class='list-content'>\
		<div class='list-updates'><a href='#'>img</a></div>\
		<div class='item-title'><a href='#'>Question goes here....?</a></div>\
		<div class='ans-box'>\
		  <div class='ans-count'>Answer goes here....</div>\
		  <span><i class='material-icons meta-info-btn'>hide meta </i></span>\
		</div>\
	</div>\
  <div class='metas'> META INFO HERE </div>\
</div>\
";
}

$("#contents").append(x);
// ----------------------------------

$('.list-content .meta-info-btn').click(function() {
  $(this).closest('.list-item').find(".metas").toggle();
});

div {
  margin: 5px;
}
.meta-info-btn:hover {
  cursor: pointer;
}
.meta-info-btn {
  background: #CCC;
  border: 1px solid #999;
  padding: 2px;
  margin: 5px;
}

.list-item {
  margin-bottom: 10px;
  border: 1px solid black;
  padding: 5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="contents"></div>