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; 
}