与JS下拉菜单

我正在通过编辑模板在我的网站上工作，但有一个下拉菜单不起作用。 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的，但是现在有一个问题...

菜单打开侧面按钮下方移动它，从而破坏整个菜单..

前：

后：

我该如何解决？

来源

2017-07-19 Takabrycheri

设置'''风格= “显示：块”'''第一 – syarul

@syarul好了，但现在它总是可见 – Takabrycheri

这里是工作的代码使用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; 
}

来源

2017-07-19 09:30:08

检查我编辑并添加此CSS - @Takabrycheri –

有没有区别，你想让我把整个代码？ – Takabrycheri

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

你可以使用$(".popup_menu").toggle();点击李nk #ddnmenu。但首先您应该删除style="display: none;"

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

来源

2017-07-19 09:30:40

您需要通过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'; 
}

来源

2017-07-19 09:33:44

与JS下拉菜单

回答

相关问题