单击时展开/缩小 div答案

【问题标题】：Expand/shrink div on click单击时展开/缩小 div
【发布时间】：2015-05-03 12:36:11
【问题描述】：

我一直在练习单击 html/css/jquery 时的一些扩展/收缩，但出于某种原因，它不起作用。我知道那里有一些，但我已经尝试过了，没有一个可以使用我的代码。

PS：现在我正在尝试扩展一个

我的目标：

使用 4 个 div 方块，全部都是可点击的（像菜单一样），当用户点击时，它会展开整个页面并加载内容（可以是外部 html 或 index.html 页面上的相同代码），并且当然，在角落有一个“关闭”图标/图像。

从正方形的位置，我希望它扩展到整页，有一些基本的宽度/高度过渡，有点淡出（有点材料设计）。

我的代码有什么问题？

HTML

<div class="content">
    <div id="menu1">
        <!-- quadrado 1 -->
    </div>

    <div id="menu2">
        <!-- quadrado 2 -->
    </div>
    <br/>
    <div id="menu3">
        <!-- quadrado 3 -->
    </div>

    <div id="menu4">
        <!-- quadrado 4 -->
    </div>

</div>

CSS

.content{
    display: inline;
    width: 400px; 
    height: 200px;
    margin: 0 auto;
}

#menu1.fullscreen{
    z-index: 9; 
    width: 100%; 
    height: 100%; 
    position: fixed; 
    background-color: #131313; 
}

#menu1, #menu2, #menu3, #menu4{display: inline-block; width:200px; height:200px;}

#menu1{background: red;}
#menu2{background: green;}
#menu3{background: blue;}
#menu4{background: orange;}

$(window).scroll(function(){
    $(".content").click(function(e){
        $("#menu1").toggleClass('fullscreen'); 
    });
});

小提琴： http://jsfiddle.net/a7nzy6w6/6/

【问题讨论】：

标签： jquery html css onclick

【解决方案1】：

您将单击事件放置在滚动事件中。这意味着您必须在滚动时单击。

只能这样尝试

$(".content").click(function(){
    $("#menu1").toggleClass('fullscreen'); 
});

或者像这样将它包裹在准备好的文档中

$(document).ready(function(){
    $(".content").click(function(){
        $("#menu1").toggleClass('fullscreen'); 
    });
});

并从 click(e) 中删除 (e) ... 只需单击 () 让我知道这是否有效

【讨论】：

【解决方案2】：

为什么是$(window).scroll(function(){...}); 而不是$(document).ready(function(){...});？

片段

$(document).ready(function() {
  $(".content").click(function(e) {
    $("#menu1").toggleClass('fullscreen');
  });
});

.content {
  display: inline;
  width: 400px;
  height: 200px;
  margin: 0 auto;
}
#menu1.fullscreen {
  z-index: 9;
  width: 100%;
  height: 100%;
  position: fixed;
  background-color: #131313;
}
#menu1,
#menu2,
#menu3,
#menu4 {
  display: inline-block;
  width: 200px;
  height: 200px;
}
#menu1 {
  background: red;
}
#menu2 {
  background: green;
}
#menu3 {
  background: blue;
}
#menu4 {
  background: orange;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="content">
  <div id="menu1">
    <!-- quadrado 1 -->
  </div>

  <div id="menu2">
    <!-- quadrado 2 -->
  </div>
  <br/>
  <div id="menu3">
    <!-- quadrado 3 -->
  </div>

  <div id="menu4">
    <!-- quadrado 4 -->
  </div>

</div>

【讨论】：

愚弄我，复制了错误的功能：3 我的错。不过，我的目标是扩展所有 div，具有材料设计效果（如 android）
你只展开menu1
@mplungjan 我一定要调整我的答案。
我试过了。我给了 div 一个类菜单，并希望 .menu.fullscreen 可以工作，但它没有
@mplungjan 这可能是因为 ID 覆盖，无论如何我将在今天晚些时候对其进行重构。此外，我认为想要的效果是用一些动画来扩展所有具有相应颜色的 div 元素。

【解决方案3】：

通过将您的代码放置在$(window).scroll() 的回调函数中，您可以在到达(".content").click() 的独立回调函数中的代码之前进行滚动并同时单击。

尝试将您的代码放在$(document).ready(function(){ ... }) 中，因为这将确保 DOM 已准备好进行操作，然后您的代码将正常运行。

$(document).ready(function(){
    $(".content").click(function(e){
        $("#menu1").toggleClass('fullscreen'); 
    });
});

【讨论】：