Fatal编程技术网

Javascript 藏匿；侧边开关

javascript jquery html css

Javascript 藏匿；侧边开关,javascript,jquery,html,css,slidetoggle,Javascript,Jquery,Html,Css,Slidetoggle,这个项目我需要一些帮助。我试图在一个div元素上获得一张图片作为背景，当点击它时，它可以被扩展和隐藏。我不知道如何使图像成为div元素的背景，也不知道如何使div从左向右切换 我真的很感谢你的帮助。多谢各位 <html> <body> <div id="couch">Info about this couch</div> </body> <script src="http://code.jq

这个项目我需要一些帮助。我试图在一个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>
试试这个

html

js代码

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

        $(this).removeClass("collapseRemoved").addClass("collapse");
    }   
});
将此代码添加到您的页面

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


$（“#沙发”）。单击（函数（）{
$（“#沙发”）。切换（1000）；
});
测试：

我查看了您的代码并对其进行了格式化，同时还设置了jfiddle。我希望这能起作用，如果不是的话，希望这是一个起点。请检查我的护照

首先，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：

  • 如果要更改宽度，请执行以下操作：

    $（“#沙发”）。单击（函数（）{ $（这个）.toggleClass（“大”）； });

    • 将此添加到css中：

    .big {
  width: 400px !important;
}
  • 如果要隐藏div本身

    $（“#沙发”）。单击（函数（）{ $（this.toggle（）； });

    • 在本例中，如果切换，div将隐藏。您希望如何恢复它

    我想你是想把div折叠起来，然后再扩展

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

    希望对你有用：）
    请尝试将脚本插入
    标记

    以供参考。您的HTML无效，因为
    脚本
    标记应位于
    头
    或
    体
    内。我做了一个小动作，但不理解您的问题。你想干什么？单击后，div应扩展到图像的大小？将
    app.js
    的路径更改为更可行的路径，如
    src=“../HTMLBook/app.js”
    ，并确保使用常规斜杠而不是反斜杠。而且为什么你把它放在一个名为CSS的文件夹里，在点击方法中是很难理解的，你可以用$$（这个）而不是$$（“yo[CouCh”），因为如果你有多个IDS，那么它总是会考虑第一个IDS。如何使它膨胀，这是我想要的。没有按钮。你会如何做同样的事件，但只是通过点击图片？我试着删除“按钮”部分，但不起作用。谢谢。：）我更新了小提琴。请让我知道这是不是你要找的？这就是我要找的轨道。如何通过点击图片来折叠div？谢谢你，拉凯什！：）嗨，艾伦，试试上面编辑的代码。我希望这能解决你的问题：）我似乎还是不明白我做错了什么。当我这么做的时候，它就崩溃了，消失了。 
    $(document).ready(function(){
  $("button").click(function(){
$("#couch").toggle('slow');
 });
});

    #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;
}

    .big {
  width: 400px !important;
}