JavaScriptのドロップダウンメニュー（Enjin）

Question

私はJavaScriptで何をしたいのかに苦労していましたので、私はStackOverflowに助けを求めることにしました。 注：私はEnjinを使用しています。これは、ゲーム用に設計されたCMSです。これは、現在

• 表示し/
• 表示し、リンクが「こんにちは名の下に今あるユーザー
• ログインへのリンクをプロファイリングし、ログアウト新規ユーザーに登録してログイン何

  」と「こんにちはゲスト」それぞれ

aトン、私はそれがログインを表示し、ドロップダウンでリンク

Similiarly、「こんにちは、名前を」登録しますトグル、それはそれnextoドロップダウン矢印を持つ

• 表示「こんにちはゲストを」やりたいですそれは私は見当もつかないとしてこれを開始する場所上の任意のアイデアは、素晴らしいことだ

ログアウトし、プロファイルのリンクを表示していましトグル、それ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

あなたはW3Schoolを見ましたか？ドロップダウンメニューの作成についてはthis tutorialをご覧ください。私はこれがちょうどあなたが探しているものだと思います。

また、あなたの投稿にjavascriptとhtmlというタグだけが付いていますが、JQueryも使用しています。プレーンなjavascriptを使ってそれをうまく動かすことは大丈夫ですし、もっと簡単かもしれません。しかし、それをJQueryに変換したい場合は、W3Schoolsの同様の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; 
}