如何在使用show more显示更少的Jquery时显示:parent和sibling标签之间没有

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

你的目标是.head2CSS中的一类,但有一个id.请改用id # 选择器.例如...

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

#head2 {
    display:none;
}

有关更多信息,请参阅CSS Selector Reference