隱藏和顯示側面切換
[英]Hide & Reveal side toggle
問題描述
我需要這個項目的幫助。 我正在嘗試獲取圖片作為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");
}
4 個解決方案
解決方案1
0 2014-05-08 13:41:11
嘗試這個
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代碼
$("#couch").click(function(){
if($(this).hasClass("collapse")){
$(this).removeClass("collapse").addClass("collapseRemoved");
}else{
$(this).removeClass("collapseRemoved").addClass("collapse");
}
});
解決方案2
0 2014-05-08 13:42:14
將此代碼添加到您的頁面
<script>
$( "#couch" ).click(function() {
$( "#couch" ).toggle(1000);
});
</script>
測試： http : //jsfiddle.net/Ss86Q/1/
解決方案3
0 2014-05-08 13:45:37
我瀏覽了您的代碼並對其進行了格式化，同時還設置了jfiddle。 我希望這能奏效，甚至希望它能作為一個起點。 請檢查我的JSfiddle。
$(document).ready(function(){
$("button").click(function(){
$("#couch").toggle('slow');
});
});
解決方案4
0 2014-05-08 13:56:02
首先，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：
如果要更改寬度：
$（“＃couch”）。click（function（）{$（this）.toggleClass（“ big”）;}）;
將此添加到您的CSS：
.big {
width: 400px !important;
}
如果要隱藏div本身
$（“＃couch”）。click（function（）{$（this）.toggle（）;}）;
在此示例中，如果切換，則div被隱藏。 您想如何還原它。
我猜您正在尋找要折疊div並再次將其擴展。
在這種情況下，請根據點擊更改div的高度。
希望它對您有用：)請嘗試將腳本插入<head></head>標記內
JS顯示/隱藏切換
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.