javascript - 单击触发器时不会出现 div

Question

我正在制作一个名为 JSOS 的操作系统，并在底部 Angular 是一个开始按钮 我有一些 jquery 使菜单在我单击按钮时出现但它不会出现...这是代码:

JQuery:

$("#startbutton").click(function () {
    $("#startmenu").toggle("blind");
});

CSS:

.startmenu {
    color:gray;
    width:400;
    height:650;
}

HTML:

<div id="startmenu" class="startmenu"></div>
<footer id="taskbar" class="taskbar">
    <div id="startbutton" style="width:25px; height:25px;">
        <img src="start.png" id="startbutton" style="width:25px; height:25px;"></img>
    </div>
</footer>

Answer 1

我在 jsFiddle 上给你做了几个演示，它是基于 Windows 的开始菜单，这里是 Fiddle

HTML

<footer id="taskbar" class="taskbar">

  <div id="startbutton">
    <img src="start.png" alt="Start"/>
  </div>

</footer>

CSS

#startmenu {
  background: #666;
  position: absolute;
  display: none;
  bottom: 25px;
  left: 0;
  color: gray;
  width: 400px;
  height: 650px;
}
#taskbar {
  background: #444;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
}
#startbutton {
  background: #ccc;
  width: 50px;
  height: 25px;
  cursor: pointer;
}

jQuery

// DEMO 1

$(function() {

  $('#startbutton').click(function() {
    $('#startmenu').fadeIn('slow');
  });

  $('#startmenu').mouseleave(function() {
    $(this).fadeOut('slow');
  });

});

// DEMO 2

$(function() {

  $('#startmenu').css({ height: '0', display: 'block' });

  $('#startbutton').click(function() {
    $('#startmenu').stop().animate({ height: '650px' }, 600 );
  });

  $('#startmenu').mouseleave(function() {
    $(this).stop().animate({ height: '0' }, 600 );
  });

});