gpt4 book ai didi

javascript - html css 和 js 不工作

转载 作者:太空宇宙 更新时间:2023-11-04 02:57:25 24 4
gpt4 key购买 nike

这是我的代码:

<!doctype html>
<html lang="en-US">
<head>
<title>Welcome - Home</title>
<link type="text/css" rel="stylesheet" href="Home.css">
<link rel="icon" href="KLOGO.png" type="image/png"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.js"></script>
<script src="Home.js"></script>
</head>
<body class="menu">
<header>
<a href="#" class="menu-toggle">Toggle</a>
<nav class="menu-side">
This is a side menu
</nav>
</header>
<p> sioeufh iufha dgrkljbgril unfvuabervluiyboyubn serlibglisuhsefiuh oaisuf aieufh aosih asioeufh iufha dgrkljbgril unfvuabervluiyboyubn serlibglisu</p>
<p>oierua yugafapiwugText and more tejiaslirfuh aiufh oaiuefhioaushf aisbhfailsubfaufha dgrkljbgril unfvuabervluiyboyubn serlibglisuh oaiusg foiygasdefoiawg pghuioyf gaiwuebfyaweoilru gfa s7ierfygasrgoooa8iweygfra iiiastygf a8we8</p>
</body>
</html>

CSS:

    .menu-side{
background: #333;
border-right: 1px solid #000;
color: #fff;
position: fixed;
top: 0;
left: -231px;
width: 210px;
height: 100%;
padding: 10px;
}
.menu{
overflow-x:hidden;
position: relative;
left: 0px;
}
.menu-open {
left: 231px;
}

和jquery:

(function () {
var body = $('body');
$('.menu-toggle').bind('click', function () {
body.toggleClass('menu-open');
return false;
});
})();

我正在使用 Brackets 程序编写我的代码,但是当我在保存所有内容并按下“切换”后进入实时 View 时,页面不会移动,我查看了所有内容,我 98% 确定它是正确的。

最佳答案

<script src="Home.js"></script></body> 之前标签。

我又开了一个类

.menu-side-open{
left:0px;
}

和 JQuery

(function () {
var body = $('body');
$('.menu-toggle').bind('click', function () {
body.toggleClass('menu-open');
$('.menu-side').toggleClass('menu-side-open');
return false;
});
})();

还添加了

.menu, .menu-side{
transition: 300ms;
}

一张漂亮的幻灯片:)

JSFiddle demo

关于javascript - html css 和 js 不工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31907411/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com