【发布时间】：2017-09-01 05:04:25
【问题描述】：
$(document).ready(function(){
$(".link").click(function(){ // when .link clicked
$(".elem").toggle(); // toggle .elem visibility
});
});
jQuery(function($){
$(document).mouseup(function (e){
var div = $(".link");
var second = $('.elem');
var close = $('.close');
if (!div.is(e.target)
&& (second.has(e.target).length == 0 || close.is(e.target))) {
second.hide();
}
});
});.wrapper {
width: 1180px;
margin-right: auto;
margin-left: auto;
}
.elem {
display:none;
margin-top: 14px;
width: 480px;
height: 310px;
background-color: grey;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
position: relative;
box-shadow:0 2px 3px rgba(0,0,0,0.5);
transition: 0.4s;
}
.elem:after {
content: '';
position: absolute;
width: 0;
height: 0;
border-bottom: 10px solid grey;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
top: -10px;
left: 33px;
}
.title {
margin: 0px 0px 10px 10px;
padding-top: 15px;
position: relative;
}
.link {
margin-left: 13px;
}
.regions {
height: 50px;
display: inline-block;
}
.floating {
display: inline-block;
margin: 10px;
line-height: 0.4;
width: 20px;
}
a.floating {
text-decoration: none;
width: 24%;
}
a.floating:hover {
text-decoration: underline;
}
.otherregion {
margin: 0px 0px 10px 10px;
padding-top: 15px;
}
.edit {
border:1px solid #9E9E9E;
color: #000000;
padding: 3px;
font-size: 14px;
font-family: Verdana;
background: #FFF;
width: 90%;
height: 23px;
}
form {
margin: 0px 0px 10px 10px;
}
.formtext {
margin: 0px;
padding-top: 2px;
}
.top {
margin-left: 13px;
margin-right: 38px;
}
.close {
margin: -27px 0px 20px 444px;
position: absolute;
font-size: 18px;
cursor: pointer;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<title>new project</title>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" type="text/css" href="css/font-awesome.css">
</head>
<body>
<div class="wrapper">
<a class="link" href="#">S.T.E.A.M. lab</a>
<div class="elem">
<p class="title">Choose youre hobby</p><a class="close">X</a>
<div class="regions">
<a class="floating" href="#">Math</a>
<a class="floating" href="#">Art</a>
<a class="floating" href="#">Science</a>
<a class="floating" href="#">Technology</a>
<a class="floating" href="#">Engineering</a>
</div>
<p class="otherregion">Or choose another one:</p>
<form>
<input class="edit" type="text" name="add" placeholder="write some text bro">
</form>
<div class="top">bla bla bla bla bla :
<p class="formtext"> • </p>
<p class="formtext"> • .</p></div>
</div>
</div>
</body>
</html>大家好。这是我的简单窗口。我已经 3 天努力改变 S.T.E.A.M。实验室文本到单击浮动类的其他文本。如果可能的话，将此结果保存在 cookie 中。更多详细信息 更多详细信息 更多详细信息
【问题讨论】：
-
您能否将您的代码重点放在导致问题的特定元素上？
-
@WookieCoder 哪里出了问题？请给我看看。
标签： javascript jquery html css cookies