Javascript 下拉菜单 (Enjin).
Javascript Dropdown Menu (Enjin)
我在尝试用 JavaScript 完成我想要的东西时遇到了一些麻烦,所以我决定向 StackOverflow 寻求帮助;注意:我使用的是Enjin,这是一个专为游戏设计的CMS。
这目前的作用
- 向新用户显示登录/注册
- 显示已登录用户的配置文件和注销链接
- 这些链接现在分别位于"您好姓名"和"您好客人"下
我想要它做什么
-
显示带有下拉箭头的"Hello Guest",切换它将显示登录和注册链接
-
同样,带有下拉箭头的"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'));
}
});
你看过W3Schools吗?查看有关创建下拉菜单的本教程。我认为这正是您要找的。
另外,你只在帖子中标记了javascript和html,但你也在使用JQuery。使用普通的javascript让它工作很好,而且可能更简单。如果你想把它转换成JQuery,你可以用W3Schools的类似JQuery教程轻松转换它。
让我知道它是怎么回事。
这是一个
起点。 不是太花哨,可以改进。 在这里试试: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;
}
相关文章:
- JavaScript下拉菜单-点击按钮并根据所选值重定向到url
- angular的下拉菜单
- 创建带有和不带有JavaScript的Bootstrap下拉菜单
- 创建下拉菜单
- 下拉菜单在菜单按钮的边缘闪闪发光
- I'我设计了一个下拉菜单,onclick会出现,而on blur会消失
- 硒IDE下拉菜单
- 我的下拉菜单中的链接不起作用
- Bootstrap Dropdown selection是在*all*下拉菜单上设置选择
- 如何将JSON转换为HTML下拉菜单
- 悬停下拉菜单即使在鼠标移出后也保持活动状态
- 基于下拉菜单创建开关
- 动态填充两个下拉菜单
- 如何将CSS(特别是填充/边距)应用于select下拉菜单的选项或optgroup
- 基于其他下拉菜单选择隐藏/显示下拉菜单
- JavaScript下拉菜单-部件在Mac上消失
- 为什么引导程序下拉菜单只有在包含bootstrap-responsive.css时才起作用
- 从选择下拉菜单中获取数据
- Bootstrap下拉菜单不起作用
- Javascript 下拉菜单 (Enjin).