2017-07-19 93 views
0

我正在通過編輯模板在我的網站上工作,但有一個下拉菜單不起作用。 CSS下拉菜單丟失。 如何使用CSS和/或JS修復它? 下面是HTML代碼:與JS下拉菜單

<a href="#" id="ddnmenu">Bentornato {$mybb->user['username']}! <i class="fa fa-caret-down"></i></a> 
<div id="ddnmenu_popup" class="popup_menu" style="display: none;"> 
    <div class="popup_item_container"> 
    <a href="{$mybb->settings['bburl']}/usercp.php" class="popup_item">User Panel<i class="fa fa-user menuadj"></i></a> 
    </div> 
    <div class="popup_item_container"> 
    <a href="{$mybb->settings['bburl']}/usercp.php?action=profile" class="popup_item">Edit Profile<i class="fa fa-pencil menuadj"></i></a> 
    </div> 
    <div class="popup_item_container"> 
    <a href="{$mybb->settings['bburl']}/usercp.php?action=options" class="popup_item">Edit Options<i class="fa fa-cogs menuadj"></i></a> 
    </div> 
    <div class="popup_item_container"> 
    <a href="{$mybb->settings['bburl']}/usercp.php?action=avatar" class="popup_item">Edit Avatar<i class="fa fa-picture-o menuadj"></i></a> 
    </div> 
    <div class="popup_item_container"> 
    <a href="{$mybb->settings['bburl']}/usercp.php?action=editsig" class="popup_item" style="padding-bottom: 4px;">Edit Signature<i class="fa fa-paint-brush menuadj"></i></a> 
    </div> 
    <div class="popup_item_container"> 
    <a href="{$mybb->settings['bburl']}/member.php?action=logout&amp;logoutkey={$mybb->user['logoutkey']}" class="popup_item">{$lang->welcome_logout}!<i class="fa fa-power-off menuadj"></i> 
         </a> 
    </div> 
</div> 

編輯: 我用你建議的解決方案,我用jQuery的,但是現在有一個問題...

菜單打開側面按鈕下方移動它,從而破壞整個菜單..

前: enter image description here

後: enter image description here

我該如何解決?

+0

設置'''風格= 「顯示:塊」'''第一 – syarul

+0

@syarul好了,但現在它總是可見 – Takabrycheri

回答

1

這裏是工作的代碼使用jQuery:

添加jQuery庫 - https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js

然後把這個代碼腳本部分:

$(document).ready(function(){ 
    $('#ddnmenu').click(function(){ 
    $('#ddnmenu_popup').slideToggle(); 
    }) 
}) 

添加這個CSS:

#ddnmenu_popup{ 
    position:absolute; 
} 
+0

檢查我編輯並添加此CSS - @Takabrycheri –

+0

有沒有區別,你想讓我把整個代碼? – Takabrycheri

+0

只需在您的css中添加 - #ddnmenu_popup {position}:absolute; } –

0

你可以使用$(".popup_menu").toggle();點擊李nk #ddnmenu。但首先您應該刪除style="display: none;"

$("#ddnmenu").click(function() { 
    $(".popup_menu").toggle(); 
}); 
0

您需要通過JavaScript設置樣式屬性。

HTML:

<a onclick="openDropdown()" href="#" id="ddnmenu">Bentornato {$mybb->user['username']}! <i class="fa fa-caret-down"></i></a> 
<div id="ddnmenu_popup" class="popup_menu" style="display: none;"> 
    ... 
</div> 

JS:

function openDropdown() { 
    document.getElementById('ddnmenu_popup').style.display = 'block'; 
}