如何顯示：使用時，父標簽和兄弟標簽之間沒有顯示

Question

我的標記設置如下：

<div class="media-body" >
    <h5 class="media-heading">
        <strong id="head">{{$blog->Title}}</strong>
        <strong id="head2">{{$blog->Title}}</strong>
    </h5>
    <button id="hide">Hide</button>
    <button id="show">Show</button>
</div>

我有2個使用jquery的按鈕來顯示和隱藏（顯示更多，更少顯示）我的h5標簽中的兩個標簽。 但是，我似乎無法使用此代碼來確保不顯示id="head2"的強標簽。 我試過了

<style>

.head2
display:none;

</style>

我也嘗試過

<style>

strong.head2
display:none;

</style>

我不確定這是否與Jquery有什么關系，所以我把它粘貼在下面，以防萬一。

jQuery代碼：

$(document).ready(function(){
     $("#head").html(function(i, h) {
    var words = h.split(/\s/);
    return words[0] + ' <span>' + words[1] + ' </span>' +' <span>' + words[2] + ' </span>';
});
});
$(document).ready(function(){
$("#hide").click(function(){
    $("#head2").hide();
});

$("#show").click(function(){
    $("#head2").show();
});
$("#hide").click(function(){
$("#head").show();
});

$("#show").click(function(){
    $("#head").hide();
});
});

Answer 1

您正在CSS中定位.head2類，但有一個ID。 請改用id #選擇器。 例如...

<strong id="head2">{{$blog->Title}}</strong>

---

#head2 {
    display:none;
}

有關更多信息，請參見CSS選擇器參考 。