Javascript下拉菜单（恩金）

Question

我一直在尝试用JavaScript实现我想要的一些麻烦，所以我决定来StackOverflow寻求帮助; 注意：我正在使用Enjin，这是一款专为游戏设计的CMS。

这是什么目前还

• 显示登录/注册新用户
• 显示配置文件和注销链接登录的用户
• 的链接是现在下的“你好名 “和”你好客人“

Wha T I想要它做

• 显示“您好游客”有一个下拉箭头nexto它，切换它会显示登录和注册链接

• Similiarly中，“你好名称”有一个下拉箭头nexto它，切换它会显示注销和个人资料链接

在哪里这个开始将是巨大的，因为我不知道任何想法。 在此先感谢！

我的代码：

$(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')); 
} 

}）;

Answer 1

你看过W3Schools吗？看看this tutorial创建下拉菜单。我认为这正是你想要的。

此外，你只在你的文章中标记了javascript和html，但你也使用JQuery。使用普通的JavaScript来让它工作很好，可能会更简单。如果您想将其转换为JQuery，则可以使用W3School中类似的JQuery tutorial进行转换。

让我知道它是怎么回事。

Answer 2

这是一个起点。不要太花哨，可以改进。尝试一下这里：https://jsfiddle.net/MarkSchultheiss/odk9a9vv/注意我不是很了解enjin所以你必须努力，在

标记

<div class="dropdown"> 
    <a class="greeting" href="#"><span class="name">My Account</span><span class="dropdownimage">&#x25bc;</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; 
}