Expand/shrink div 点击

Question

我一直在练习 expand/shrink 点击 html/css/jquery，但由于某些原因，它不起作用。我知道那里有一些，但我已经试过了，none 正在使用我的代码。

PS：目前我正在尝试扩展一个

我的objective:

使用 4 个 div 方块，所有方块都是可点击的（如菜单），当用户点击时，它会展开一个完整的页面并加载内容（可以是外部 html 或相同的代码在 index.html 页面上），当然，在角落有一个 "close" icon/image。

从正方形所在的位置开始，我希望它扩展到整页，有一些基本的 width/height 过渡，有点淡出（有点 material 设计）。

我的代码有什么问题？

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

JS

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

Fiddle: http://jsfiddle.net/a7nzy6w6/6/

Answer 1

为什么 $(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>

Answer 2

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

只这样试试

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

或者像这样把它包在准备好的文件里面

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

并从 click(e) 中删除 (e) ... 直接写 click() 让我知道这是否有效

Answer 3

通过将您的代码放在 $(window).scroll() 的回调函数中，您必须滚动并同时点击才能到达独立于 [=11= 的回调函数的代码=12=].

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

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

Expand/shrink div 点击

Expand/shrink div on click

html

css

jquery

onclick