如何显示:当使用show more show less时，父标签和兄弟标签之间没有显示

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选择器参考