0
$(document).ready(function(){
$(".link").click(function(){ // when .link clicked
$(".elem").toggle(); // toggle .elem visibility
});
});
jQuery(function($){
\t $(document).mouseup(function (e){
\t \t var div = $(".link");
\t \t var second = $('.elem');
\t \t var close = $('.close');
\t \t if (!div.is(e.target)
\t \t && (second.has(e.target).length == 0 || close.is(e.target))) {
\t \t \t second.hide();
\t \t }
\t });
});.wrapper {
\t width: 1180px;
\t margin-right: auto;
\t margin-left: auto;
}
.elem {
\t display:none;
\t margin-top: 14px;
\t width: 480px;
\t height: 310px;
\t background-color: grey;
\t border-radius: 5px;
\t -moz-border-radius: 5px;
\t -webkit-border-radius: 5px;
\t position: relative;
\t box-shadow:0 2px 3px rgba(0,0,0,0.5);
\t transition: 0.4s;
}
.elem:after {
\t content: '';
\t position: absolute;
\t width: 0;
\t height: 0;
\t border-bottom: 10px solid grey;
\t border-left: 10px solid transparent;
\t border-right: 10px solid transparent;
\t top: -10px;
\t left: 33px;
}
.title {
\t margin: 0px 0px 10px 10px;
\t padding-top: 15px;
\t position: relative;
}
.link {
\t margin-left: 13px;
}
.regions {
\t height: 50px;
\t display: inline-block;
}
.floating {
\t display: inline-block;
\t margin: 10px;
\t line-height: 0.4;
\t width: 20px;
}
a.floating {
\t text-decoration: none;
\t width: 24%;
}
a.floating:hover {
\t text-decoration: underline;
}
.otherregion {
\t margin: 0px 0px 10px 10px;
\t padding-top: 15px;
}
.edit {
\t border:1px solid #9E9E9E;
color: #000000;
padding: 3px;
font-size: 14px;
font-family: Verdana;
background: #FFF;
width: 90%;
height: 23px;
}
form {
\t margin: 0px 0px 10px 10px;
}
.formtext {
\t margin: 0px;
\t padding-top: 2px;
}
.top {
\t margin-left: 13px;
\t margin-right: 38px;
}
.close {
\t margin: -27px 0px 20px 444px;
\t position: absolute;
\t font-size: 18px;
\t cursor: pointer;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
\t <title>new project</title>
\t <link rel="stylesheet" type="text/css" href="style.css">
\t <link rel="stylesheet" type="text/css" href="css/font-awesome.css">
</head>
<body>
<div class="wrapper">
\t <a class="link" href="#">S.T.E.A.M. lab</a>
\t <div class="elem">
\t \t <p class="title">Choose youre hobby</p><a class="close">X</a>
\t \t <div class="regions"> \t
\t \t \t <a class="floating" href="#">Math</a>
\t \t \t <a class="floating" href="#">Art</a>
\t \t \t <a class="floating" href="#">Science</a>
\t \t \t <a class="floating" href="#">Technology</a>
\t \t \t <a class="floating" href="#">Engineering</a>
\t \t </div>
\t \t <p class="otherregion">Or choose another one:</p>
\t \t <form>
\t \t \t <input class="edit" type="text" name="add" placeholder="write some text bro">
\t \t </form>
\t \t <div class="top">bla bla bla bla bla :
\t \t <p class="formtext"> \t \t • </p>
\t \t <p class="formtext"> \t \t • .</p></div>
\t </div>
</div>
</body>
</html>嗨everyone.This是我簡單的window.Already3天IM奮力改變S.T.E.A.M.實驗室文本從浮動類的其他文本，哪一個被點擊。並且如果它可能將此結果保存在cookie中。更多詳細信息更多詳細信息更多詳細信息更多詳細信息（對不起，這是用於stackoverflow他們neeed更多詳細信息）
您可以將您的代碼專注於引起問題的特定元素嗎？ – WookieCoder
@WookieCoder問題在哪裏？給我看看。 – DuuudeXX8