Question

我需要一些关于这个项目的帮助。我试图将图片作为div元素的背景，可以在点击时进行扩展和隐藏。我不知道如何使图像成为div元素的背景，我不知道如何从左到右进行div切换。

我非常感谢任何帮助。谢谢。

<html>
    <body>
        <div id="couch">Info about this couch</div>
    </body>
    <script src="http://code.jquery.com/jquery-1.11.0.min.js" type="text/javascript"      charset="utf-8"></script>
    <script src="C:\Users\Jason\Desktop\CSS\HTMLBook/app.js" type="text/javascript" charset="utf-8"></script>
 </html>

#couch {
    height: 95px;
    width: 65px;
    background-color: silver;
    border: solid;
    top: 40%;
    position: relative;
    border-radius: 8px; 
    background-image: url("http://www.rowefurniture.com/uploads/images/sofas/thumb/C570.jpg");
}

Answer 1

试试这个

HTML

<body>
    <div id="couch" class="collapseRemoved">Info about this couch</div>
</body>

CSS

    #couch {
   background-color: silver;
    border: solid;
    top: 40%;
    position: relative;
    border-radius: 8px; 
    background: url("http://www.rowefurniture.com/uploads/images/sofas/thumb/C570.jpg") 100% 100%;
    background-size:100%

}
.collapseRemoved{
    width:200px;
    height:100px;

}
.collapse{
    width:100px;
}

js code

 $("#couch").click(function(){    
    if($(this).hasClass("collapse")){
        $(this).removeClass("collapse").addClass("collapseRemoved");
    }else{

        $(this).removeClass("collapseRemoved").addClass("collapse");
    }   
});

Answer 2

将此代码添加到您的页面

<script>
$( "#couch" ).click(function() {
      $( "#couch" ).toggle(1000);
    });
</script>

测试：http://jsfiddle.net/Ss86Q/1/

Answer 3

我查看了你的代码并对其进行了格式化，同时还设置了一个jfiddle。我希望这是有效的，如果没有希望它是一个起点。请检查我的JSfiddle。

http://jsfiddle.net/jmcH8

$(document).ready(function(){
  $("button").click(function(){
$("#couch").toggle('slow');
 });
});

Answer 4

JSBIN DEMO

首先是CSS

#couch {
    height: 95px;
    border: solid;
    top: 40%;
    position: relative;
    border-radius: 8px; 
    background-image: url("http://www.rowefurniture.com/uploads/images/sofas/thumb/C570.jpg");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}

现在Jquery：

如果您想更改宽度：

$（＆＃34;＃couch＆＃34;）。click（function（）{ $（本）.toggleClass（＆＃34;大＆＃34;）; }）;

将此添加到您的css：

.big {
  width: 400px !important;
}

如果你想隐藏div本身

$（＆＃34;＃couch＆＃34;）。click（function（）{ $（本）.toggle（）; }）;

在此示例中，如果您切换div是隐藏的。你想如何恢复它。

我猜你想要崩溃div并再次展开它。

在这种情况下，请根据点击更改div的高度。

希望它对你有用:) 请尝试在<head></head>标记

隐藏＆amp;揭示侧面切换

4 个答案: