我一直在努力用JavaScript完成我想要的东西,所以我决定来StackOverflow寻求帮助; 注意:我使用的是Enjin,这是一款专为游戏设计的CMS。
目前的情况
我想要它做什么
显示“Hello Guest”,下拉箭头为nexto it,切换它会显示登录和注册链接
同样地,带有下拉箭头的“Hello Name”,切换它会显示注销和个人资料链接
关于从哪里开始的任何想法都会很棒,因为我不知道。 提前谢谢!
我的代码:
$(function(){
var username=$('.user span.element_username').text();
if (username == ''){
$(".topHead_text").prepend("Hello Guest!<br> <a href=\"/login\">Login</a> or <a href=\"/login/do/register\">Register</a>");
}
else{
$(".topHead_text").append('<a href="/profile">').append('Hello </a>');
$(".topHead_text").append(username);
$(".topHead_text").append('<a href="/logout"><br>LOGOUT</a>');
$(".topHead_text").append('<a href="/profile">PROFILE</a>');
$('#enjin-bar .right .join-site a').appendTo($('.topHead_text'));
}
});
答案 0 :(得分:0)
此外,您只在帖子中标记了javascript和html,但您还使用了JQuery。使用普通的JavaScript来使其工作很好,可能更简单。如果你想将它转换为JQuery,你可以使用W3Schools中的类似JQuery tutorial轻松转换它。
让我知道它是怎么回事。
答案 1 :(得分:0)
这是一个起点。不太花哨,可以改进。在这里尝试一下:https://jsfiddle.net/MarkSchultheiss/odk9a9vv/注意我对enjin知之甚少,所以你必须在那里工作。
<强>标记强>
<div class="dropdown">
<a class="greeting" href="#"><span class="name">My Account</span><span class="dropdownimage">▼</span></a>
<div class="submenu">
<ul class="root">
<li><a class="login" href="/login">Login</a></li>
<li><a class="profile" href="/profile">Profile</a></li>
</ul>
</div>
</div>
<div class="contentcontainer">
<div class="user">
<span class="element_username">I am Harry</span>
</div>
<div class="topHead_text">
Tophead Text
</div>
</div>
<强>代码强>
$(document).ready(function() {
var username = $('.user span.element_username').text();
if (!username) {
username = 'Hello Guest!';
$('.login').text("Login").attr('href', '/login');
$('.profile').text("Register").attr('href', '/login/do/register');
}
$(".greeting").data('ishidden', true).find('.name').text(username);
$(".greeting").on('click', function() {
var X = $(this).data('ishidden');
$(".submenu").toggle(X);
$(this).data('ishidden', !X);
});
//Mouse click on sub menu
$(".submenu").on('mouseup', function() {
return false;
});
//Mouse click on user link
$(".greeting").mouseup(function() {
return false;
});
//Document Click to hide menu
$(document).on('mouseup', function() {
$(".submenu").hide();
$(".greeting").data('isshown', '');
});
});
CSS:
.contentcontainer {
position: relative;
height: 2em;
top: 3em;
}
.dropdown {
top: 1em;
position: relative;
text-align: left;
font-family: arial;
font-weight: bold;
}
.dropdown * {
text-decoration: none;
font-size: 1em;
color: #000000;
}
.dropdownimage {
padding-right: 1em;
padding-left: 1em;
display: inline-block;
}
.submenu {
background: #ffffff;
position: absolute;
top: -0.75em;
left: -1em;
z-index: 100;
width: 10em;
display: none;
margin-left: 0.6em;
padding: 3em 0 0.25em;
border-radius: 6px;
box-shadow: 0 0.1em 0.8em rgba(0, 0, 0, 0.45);
}
.dropdown li a {
color: #000000;
display: block;
padding: 0.3em 1em;
cursor: pointer;
}
.dropdown li a:hover {
background: #155FB0;
color: #FFFFFF;
}
a.greeting {
background-color: #FFFFFF;
background-color: pink;
position: absolute;
z-index: 110;
display: block;
padding: 0.5em 0 0 0.75em;
height: 2em;
margin: -0.75em 0 0 -0.4em;
cursor: pointer;
}
.root {
list-style: none;
margin: 0;
padding: 0;
font-size: 1em;
padding: 0.5em 0 0 0;
border-top: 1px solid #dedede;
}