隐藏和显示侧面切换
Posted
技术标签:
【中文标题】隐藏和显示侧面切换【英文标题】：Hide & Reveal side toggle 【发布时间】：2014-05-08 13:25:30 【问题描述】：我在这个项目上需要一些帮助。我正在尝试将图片作为 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");
【问题讨论】：
仅供参考，您的 HTML 无效，因为script 标记应位于 head 或 body 内。
我做了一个小提琴，但不明白你的问题。 jsfiddle.net/Ss86Q你想做什么？点击时，div 应该扩大到图片的大小？
将app.js 的路径更改为更可行的路径，例如src="../HTMLBook/app.js"，并确保使用常规斜杠而不是反斜杠。而你为什么把它放在一个名为 CSS 的文件夹中是很令人费解的
【参考方案1】：
将此代码添加到您的页面
<script>
$( "#couch" ).click(function()
$( "#couch" ).toggle(1000);
);
</script>
测试：http://jsfiddle.net/Ss86Q/1/
【讨论】：
在 click 方法中，您可以使用 $(this) 而不是 $("#couch") 因为如果您有多个 id，那么它将始终考虑第一个。 这个好像一直隐藏。如何让它扩大。【参考方案2】：我查看了您的代码并对其进行了格式化，同时还设置了一个 jfiddle。我希望这可行，如果不是希望它是一个起点。请检查我的 JSfiddle。
http://jsfiddle.net/jmcH8
$(document).ready(function()
$("button").click(function()
$("#couch").toggle('slow');
);
);
【讨论】：
这就是我想要的。只是没有按钮。您将如何进行相同的活动，但只需单击图片？我尝试删除“按钮”部分，但它不起作用。谢谢你。 :) 我已经更新了小提琴。如果这是您要找的，请告诉我？【参考方案3】：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：
如果你想改变宽度：
$("#couch").click(function() $(this).toggleClass("big"); );
将此添加到您的 CSS：
.big
width: 400px !important;
如果你想隐藏 div 本身
$("#couch").click(function() $(this).toggle(); );
在这个例子中，如果你切换 div 是隐藏的。你想如何恢复它。
我猜你想折叠 div 并再次展开它。
在这种情况下，根据点击改变 div 的高度。
希望它对你有用:)
请尝试在<head></head> 标签内插入脚本
【讨论】：
似乎仍然无法弄清楚我做错了什么。当我这样做时，它就会崩溃并消失。【参考方案4】：试试这个
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");
);
【讨论】：
这就是我正在寻找的曲目。如何通过单击图片来折叠 div？谢谢拉克什！ :) 嗨艾伦，试试上面编辑的代码。我希望这能解决你的问题:)以上是关于隐藏和显示侧面切换的主要内容，如果未能解决你的问题，请参考以下文章