下拉与JS
下拉与JS
提问于 2017-07-19 09:04:48
我正在通过编辑一个模板在我的网站上工作，但是有一个下拉菜单不能工作。下拉菜单CSS丢失。如何用CSS和/或JS修复它？下面是HTML代码：
<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&logoutkey={$mybb->user['logoutkey']}" class="popup_item">{$lang->welcome_logout}!<i class="fa fa-power-off menuadj"></i>
</a>
</div>
</div>编辑:我使用了您向我建议的jquery解决方案，但是现在有了另一个问题.
当菜单打开时，侧边按钮在它下面移动，从而破坏了整个菜单。
在此之前：
之后：
我怎么才能修好它？
回答 3
Stack Overflow用户
回答已采纳
发布于 2017-07-19 09:30:08
下面是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;
} Stack Overflow用户
发布于 2017-07-19 09:30:40
您可以在单击链接$( ".popup_menu" ).toggle();时使用#ddnmenu。但是首先您应该删除style="display: none;"
$( "#ddnmenu" ).click(function() {
$( ".popup_menu" ).toggle();
});Stack Overflow用户
发布于 2017-07-19 09:33:44
您需要通过JavaScript设置style属性。
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>联署材料：
function openDropdown() {
document.getElementById('ddnmenu_popup').style.display = 'block';
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/45185827
复制相关文章
相似问题
腾讯云开发者
