Question

我正在创建一个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>

CSS：

.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");
    });
});

FIDDLE

Answer 1

我建议toggle使用单个css类，例如open，然后用css完成剩下的工作。并且不要忘记给.banner-content一个height，否则它不可见。

$(function() {
    $(".banner").click(function() {
        $(this).toggleClass("open")
    });
});

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="banner">
  <div style="height:35px; line-height:30px; color:white;">Click to enlarge ></div>
  <div class="banner-content"></div>
</div>

Answer 2

你可以隐藏并显示＆＃34; banner-content＆＃34;根据＆＃34; banner＆＃34;

的高度

$(document).ready(function () {
        $(".banner").find(".banner-content").hide();
    $(".banner").click(function(){
        $(this).css('height', $(this).css('height') == "35px" ? "270px" : "35px");
        if($(this).css('height') == "35px")
            $(this).find(".banner-content").hide();
        else
        $(this).find(".banner-content").show();
    });
});

https://jsfiddle.net/pt4jaL20/1/

是否有可能隐藏＆＃34;一个小div中的图像，并在展开时显示它？

2 个答案: