Javascript 如何显示：使用show more show less Jquery时，父标记和同级标记之间无

我的标记设置如下：

<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>

我也试过了

<style>

strong.head2
display:none;

</style>

B.2
显示：无；

我不确定这是否与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();
});
});

$（文档）.ready（函数（）{
$（“#head”）.html（函数（i，h）{
var words=h.split（/\s/）；
返回单词[0]+''+单词[1]+''+''+单词[2]+''；
});
});
$（文档）.ready（函数（）{
$（“#隐藏”）。单击（函数（）{
$（“#头2”）.hide（）；
});
$（“#显示”）。单击（函数（）{
$（“#头2”）.show（）；
});
$（“#隐藏”）。单击（函数（）{
$（“#头”）.show（）；
});
$（“#显示”）。单击（函数（）{
$（“#头”）.hide（）；
});
});

您的CSS中有一类

.head2

，但有一个id。请改用id

选择器。例如

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

---

有关更多信息，请参见。感谢@sal niro（以及您的快速回复），我希望您在上面的问题中错误地忘记了CSS花括号。您应该合并jQuery代码，以便只获得一个

$（document.ready（）。单击事件也是如此，
$（“#隐藏”）.click（函数（）{$（“#头”）.show（）；$（“#头2”）.hide（）}），依此类推，
$（“#show”）。单击（）
I did@Anriëtte Myburgh。抱歉我赶时间啊谢谢@EdenSource
<strong id="head2">{{$blog->Title}}</strong>

#head2 {
    display:none;
}