我正在创建一个名为JSOS的操作系统,位于底部 角是一个开始按钮我有一些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>
答案 0 :(得分:2)
我在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 );
});
});
答案 1 :(得分:1)
1 .- 首先,您必须拥有unique个ID。您#startbutton
和div
元素都有img
。
2 .- 您需要在要显示/隐藏的div
中显示可见内容,或者使用CSS添加一些高度/宽度/边框等,这样您才能真正看到它。否则它就在那里,但你不会看到它。
<div id="startmenu" class="startmenu">CONTENT</div>
,通过添加文字可以看到它; 和/或使用CSS为其指定高度/宽度/背景颜色/边框。
演示here
答案 2 :(得分:-1)
试试这个
将此添加到您的css display:none;
,以便在页面加载时隐藏div,然后您可以尝试使用代码,它可以正常运行
正在使用 DEMO
<html>
<head>
<title>Desktop</title>
<link rel="stylesheet" href="dotluv.css" />
</head>
<body>
<style>
.taskbar {
background-image: linear-gradient(bottom, #1F5E3E 32%, #1BC27A 66%, #0CC9C9 83%);
background-image: -o-linear-gradient(bottom, #1F5E3E 32%, #1BC27A 66%, #0CC9C9 83%);
background-image: -moz-linear-gradient(bottom, #1F5E3E 32%, #1BC27A 66%, #0CC9C9 83%);
background-image: -webkit-linear-gradient(bottom, #1F5E3E 32%, #1BC27A 66%, #0CC9C9 83%);
background-image: -ms-linear-gradient(bottom, #1F5E3E 32%, #1BC27A 66%, #0CC9C9 83%);
background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0.32, #1F5E3E),
color-stop(0.66, #1BC27A),
color-stop(0.83, #0CC9C9)
);
width:100%;
height:25px;
position: fixed;
bottom: 0px;
cursor:pointer;
}
.background {
background-image: linear-gradient(bottom, #F08C11 22%, #21FCFC 61%);
background-image: -o-linear-gradient(bottom, #F08C11 22%, #21FCFC 61%);
background-image: -moz-linear-gradient(bottom, #F08C11 22%, #21FCFC 61%);
background-image: -webkit-linear-gradient(bottom, #F08C11 22%, #21FCFC 61%);
background-image: -ms-linear-gradient(bottom, #F08C11 22%, #21FCFC 61%);
background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0.22, #F08C11),
color-stop(0.61, #21FCFC)
);
width:1350;
height:628;
}
.window {
width:640;
height:530;
color:aqua;
-moz-box-shadow: -5px -5px 5px 5px #888;
-webkit-box-shadow: -5px -5px 5px 5px#888;
box-shadow: -5px -5px 5px 5px #888;
}
#startmenu{
display:none;
}
.startmenu {
background:gray;
width:400;
height:650;
}
</style>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script>
$(function() {
$( "#welcomedialog" ).dialog({
height: 140,
modal: true,
show: {
effect: "blind",
duration: 1000
},
hide: {
effect: "explode",
duration: 1000
}
});
$( "#internetwindow" ).dialog({
autoOpen: false,
show: {
effect: "blind",
duration: 1000
},
hide: {
effect: "explode",
duration: 1000
}
});
$( "#internetopener" ).click(function() {
$( "#internetwindow" ).dialog( "open" );
});
$( "#startbutton" ).click(function() {
$( "#startmenu" ).toggle( "blind" );
});
});
</script>
<div id="background" class="background">
<div id="welcomedialog" title="Welcome">
<span style="color:#cf00ff;">H</span><span style="color:#d727c3;">e</span><span style="color:#df4e87;">l</span><span style="color:#e6744b;">l</span><span style="color:#ee9b0f;">o</span><span style="color:#f2b40b;"> </span><span style="color:#f7cd08;">a</span><span style="color:#fbe604;">n</span><span style="color:#ffff00;">d</span><span style="color:#bfff00;"> </span><span style="color:#80ff00;">w</span><span style="color:#40ff00;">e</span><span style="color:#00ff00;">l</span><span style="color:#00ff40;">c</span><span style="color:#00ff80;">o</span><span style="color:#00ffbf;">m</span><span style="color:#00ffff;">e</span><span style="color:#00bfff;"> </span><span style="color:#0080ff;">t</span><span style="color:#0040ff;">o</span><span style="color:#0000ff;"> </span><span style="color:#4000bf;">J</span><span style="color:#800080;">S</span><span style="color:#bf0040;">O</span><span style="color:#ff0000;">S</span>
</div>
<div id="startmenu" class="startmenu"></div>
</div>
<footer id="taskbar" class="taskbar"><div id="startbutton" style="width:25px; height:25px;"><img src="start.png" style="width:25px; height:25px;"></img></div></footer>
</body>
</html>