老师看一下
来源：3-2 作业题
盈西
2020-09-02 16:29:02
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="css/index.css"> </head> <body> <div class="one" id="one"> <p class="one-nav" id="one-nav"> <a class="one-nav-item one-nav-item_active" href="javascript:;">前端</a> <a class="one-nav-item" href="javascript:;">java</a> <a class="one-nav-item" href="javascript:;">ios</a> <a class="one-nav-item" href="javascript:;">Android</a> <a class="one-nav-item" href="javascript:;">php</a> </p> <p class="one-title"> imooc <span class="one-title-btn" id="one-title-btn"></span> </p> <p class="one-logo"> <img class="one-logo-img" src="img/1.png" alt=""> </p> <p class="one-text">IMOOC</p> <p class="one-btn-container"> <button type="button" class="one-btn">start</button> </p> </div> <script src="js/jquery.js"></script> <script src="js/zepto.min.js"></script> <script src="js/hammer.min.js"></script> <script src="js/flexible.js"></script> <script src="js/tap.js"></script> <script src="js/index.js"></script> </body> </html>
/* css reset */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
a {
text-decoration: none;
}
/* one */
.one {
position: relative;
height: 35rem;
background-color: #B2C5CC;
}
.one-nav {
display: flex;
width: 50%;
height: 4.5rem;
justify-content: space-between;
align-items: center;
margin: 0 auto;
}
.one-nav-item {
color: #757575;
font-size: 1rem;
}
.one-nav-item_active {
color: #afafaf;
}
.one-nav_list {
position: absolute;
top: 4.5rem;
width: 100%;
overflow: hidden;
}
.one-nav_list .one-nav-item {
display: flex;
flex-flow: column;
justify-content: center;
align-items: center;
height: 2rem;
}
.one-title {
display: none;
}
.one-logo,
.one-text,
.one-btn-container {
display: flex;
justify-content: center;
}
.one-logo {
margin: 3rem 0 2rem;
}
.one-logo-img {
width: 15%;
}
.one-text {
font-size: 1rem;
color: #fff;
margin-bottom: 4rem;
}
.one-btn {
width: 9rem;
height: 2.5rem;
border: none;
background-color: rgb(255, 255, 255);
font-size: 1rem;
}
@media (max-width: 750px) {
.one-nav {
display: none;
}
.one-title {
position: relative;
display: flex;
justify-content: center;
align-items: center;
height: 4.5rem;
background-color: #7EA6B1;
font-size: 1.5rem;
color: #fff;
}
.one-title-btn {
position: absolute;
top: 50%;
right: 1.6rem;
margin-top: -0.8rem;
width: 1.6rem;
height: 1.6rem;
border: 2px solid #B2C5CC;
}
.one-text {
font-size: 2.5rem;
margin-bottom: 3rem;
}
.one-btn {
font-size: 2rem;
width: 9.5rem;
height: 3.5rem;
}
}
(function($){
function Tap (option) {
this.$btn = option.btn;
this.$el = option.el;
var self = this;
this.$btn.on('tap',function () {
self.$el.className += 'one-nav_list';
});
}
$.fn.extend({
tap: function (option) {
var tap = $(this).data('tap');
if (!tap) {
$(this).data('tap', tap = new Tap(option));
}
return this;
}
});
})(jQuery);
$('#one').tap({
btn:$('#one-title-btn'),
el:$('#one-nav')
});老师这个点击事件要怎么写?
1回答
-
同学你好，是想问在iPhone6型号下，点击方框，怎么显示列表吗？
如果是的话，那么：可以参考下方的操作（同学可以根据自己的布局进行修改），nav>span是如下元素：
nav下的ul是如下元素，并设置定位，初始时定位在页面外侧，例如top值为-350px：
另外：这是一个项目作业，牵扯到的文件、代码比较多，在作业区域是可以上传作业的。有了完整的项目，批复作业的老师为你指导，并把问题与修改方案整理成文档发送给你，能够更好的帮助你完善作业。
如果我的回答帮到了你，欢迎采纳，祝学习愉快~
0
相似问题