隐藏和显示侧面切换答案

【问题标题】：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 的文件夹中是很令人费解的

标签： javascript jquery html css slidetoggle

【解决方案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？谢谢拉克什！ :)
嗨艾伦，试试上面编辑的代码。我希望这能解决你的问题:)