Jquery 有没有可能；隐藏“；在小div中显示图像，并在其展开时显示？

我正在创建一个div，当它点击时会展开，到目前为止它是35px高的，我不想让它保存一个大约250px高的图像，并在div展开时显示

我想我可以将图像设置为子div中的背景，但它不起作用

这就是我到目前为止所做的：

HTML:

<div class="banner">
    <div style="height:35px; line-height:30px; color:white;">Click to enlarge ></div>

    <div class="banner-content">
    </div>
</div>

.banner {width: 100%; height:35px; background-color:red; cursor:pointer;}
.banner-content {width: 100%; background-color:blue; background-image: url("https://www.google.co.uk/logos/doodles/2016/2016-doodle-fruit-games-day-8-5666133911797760.3-hp.gif");}

$(document).ready(function () {
    $(".banner").click(function(){
        $(this).css('height', $(this).css('height') == "35px" ? "270px" : "35px");
    });
});

脚本：

<div class="banner">
    <div style="height:35px; line-height:30px; color:white;">Click to enlarge ></div>

    <div class="banner-content">
    </div>
</div>

.banner {width: 100%; height:35px; background-color:red; cursor:pointer;}
.banner-content {width: 100%; background-color:blue; background-image: url("https://www.google.co.uk/logos/doodles/2016/2016-doodle-fruit-games-day-8-5666133911797760.3-hp.gif");}

$(document).ready(function () {
    $(".banner").click(function(){
        $(this).css('height', $(this).css('height') == "35px" ? "270px" : "35px");
    });
});

---

我建议

切换一个css类，比如
打开
，然后用css完成其余的操作。不要忘了给
.banner content
加上
高度，否则它就看不见了


$（函数（）{
$（“.banner”）。单击（函数（）{
$（this.toggleClass（“打开”）
});
});
.banner{
宽度：100%；
高度：35px；
背景色：红色；
光标：指针；
}
.banner.open{
高度：270px；
}
.banner.open.banner内容{
宽度：100%；
高度：270px；
背景颜色：蓝色；
背景图像：url（“https://www.google.co.uk/logos/doodles/2016/2016-doodle-fruit-games-day-8-5666133911797760.3-hp.gif）；}

点击放大>
您可以根据“横幅”的高度隐藏和显示“横幅内容”

css媒体查询？