我有一个Django的管理员头像,用css网格分成两列。我在用户图标上加入了一个JavaScript下拉效果,以显示其他元素,如 "更改密码 "和 "注销",但问题是下拉效果隐藏在列内,不显示在列外。
我需要提到的是,下拉式停留在一个容器中,并带有 剪贴路径:多边形 应用。
如何解决这个问题?
先谢谢你了。
一个网站开发的新手
下面你可以找到部分Django代码。
{% load i18n static %}<!DOCTYPE html>
{% get_current_language as LANGUAGE_CODE %}{% get_current_language_bidi as LANGUAGE_BIDI %}
<html lang="{{ LANGUAGE_CODE|default:"en-us" }}" {% if LANGUAGE_BIDI %}dir="rtl"{% endif %}>
<head>
<title>{% block title %}{% endblock %}</title>
<link rel="stylesheet" type="text/css" href="{% block stylesheet %}{% static "admin/css/base.css" %}{% endblock %}">
{% block extrastyle %}{% endblock %}
{% if LANGUAGE_BIDI %}<link rel="stylesheet" type="text/css" href="{% block stylesheet_rtl %}{% static "admin/css/rtl.css" %}{% endblock %}">{% endif %}
{% block extrahead %}
{{ block.super }}
<script>
/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function openDropdown() {
document.getElementById("myDropdown").classList.toggle("show");
}
// Close the dropdown if the user clicks outside of it
window.onclick = function(event) {
if (!event.target.closest('.dropbtn')) {
let dropdowns = document.getElementsByClassName("dropdown-content");
let i;
for (i = 0; i < dropdowns.length; i++) {
let openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}
</script>
{% endblock %}
头部代码在Django中
<div id="header">
<div id="branding">
{% block branding %}{% endblock %}
</div>
{% block usertools %}
{% if has_permission %}
<div id="user-tools">
{% block welcome-msg %}
{% trans 'Welcome,' %}
<strong>{% firstof user.get_short_name user.get_username %}</strong>.
{% endblock %}
{% block userlinks %}
{# {% if site_url %}#}
{# <a href="{{ site_url }}">{% trans 'View site' %}</a> /#}
{# {% endif %}#}
{% if user.is_active and user.is_staff %}
{% url 'django-admindocs-docroot' as docsroot %}
{% if docsroot %}
<a href="{{ docsroot }}">{% trans 'Documentation' %}</a> /
{% endif %}
{% endif %}
<div class="dropdown">
<button onclick="openDropdown()" class="dropbtn"><img src="{% static "admin/img/user.svg"%}" alt="User Menu" style="height: 30px;"></button>
<div id="myDropdown" class="dropdown-content">
{% if user.has_usable_password %}
<a href="{% url 'admin:password_change' %}">{% trans 'Change password' %}</a> /
{% endif %}
<a href="{% url 'admin:logout' %}">{% trans 'Log out' %}</a>
</div>
</div>
{% endblock %}
</div>
我展示的是下拉菜单的CSS。
/* Dropdown in navbar */
.dropbtn {
background-color: #0071ce;
color: white;
/*padding: 16px;*/
font-size: 16px;
border: none;
cursor: pointer;
}
.dropbtn:hover, .dropbtn:focus {
background-color: #005ba6;
}
.dropdown {
position: relative;
display: block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
/*overflow: auto;*/
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
z-index: 1;
right: 0.5rem;
}
.dropdown-content a {
color: black !important;
padding: 1rem 1rem !important;
text-decoration: none;
display: block;
}
.dropdown a:hover {background-color: #ddd;}
.show {display: block;}
下拉内容需要绝对定位,并且要比你想显示的内容有更高的z-index。
一个codepen或者类似的东西会让这个问题更容易帮助解决。
我已经把你的代码复制到下面的代码段中,并做了注释。overflow: hidden;
从#header开始,似乎可以工作,不是吗?
/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function openDropdown() {
const myDropdown = document.getElementById("myDropdown");
const show = document.getElementById("myDropdown").classList.toggle("show");
if(show){
const {top, left, width} = myDropdown.getBoundingClientRect();
myDropdownClone = myDropdown.cloneNode(true);
myDropdownClone.style.width = `${width}px`;
myDropdownClone.style.top = `${top}px`;
myDropdownClone.style.left = `${left}px`;
myDropdownClone.style.position = 'fixed';
myDropdownClone.id = 'myDropdownClone';
document.body.append(myDropdownClone);
} else {
document.getElementById("myDropdownClone").remove();
}
}
// Close the dropdown if the user clicks outside of it
window.onclick = function(event) {
if (!event.target.closest('.dropbtn')) {
let dropdowns = document.getElementsByClassName("dropdown-content");
let i;
for (i = 0; i < dropdowns.length; i++) {
let openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}
#header {
width: auto;
height: auto;
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 40px;
background: #417690;
color: #ffc;
/* overflow: hidden; */
clip-path: polygon(5% 0%, 100% 0%, 100% 100%, 0% 100%);
}
#header {
background: #FFF;
-moz-box-shadow: 0 3px 3px 0 rgba(148, 148, 148, 0.5);
box-shadow: 0 3px 3px 0 rgba(148, 148, 148, 0.5);
padding: 0;
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-areas: "logo navbar";
}
.dropbtn {
background-color: #0071ce;
color: white;
/*padding: 16px;*/
font-size: 16px;
border: none;
cursor: pointer;
}
.dropbtn:hover, .dropbtn:focus {
background-color: #005ba6;
}
.dropdown {
position: relative;
display: block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
/*overflow: auto;*/
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
z-index: 1;
right: 0.5rem;
}
.dropdown-content a {
color: black !important;
padding: 1rem 1rem !important;
text-decoration: none;
display: block;
}
.dropdown a:hover {background-color: #ddd;}
.show {display: block;}
<div id="header">
<div id="branding">
</div>
<div id="user-tools">
<strong>My name</strong>.
<a href="#">View site</a>
<a href="#">trans Documentation</a> /
<div class="dropdown">
<button onclick="openDropdown()" class="dropbtn"><img src="" alt="User Menu" style="height: 30px;"></button>
<div id="myDropdown" class="dropdown-content">
<a href="#">Change password</a> /
<a href="#">Log out</a>
</div>
</div>
</div>
</div>
[编辑] 我已经编辑了代码片段,以考虑到下面的 clip-path: polygon(5% 0%, 100% 0%, 100% 100%, 0% 100%);
评论中提到
对于一个带有剪切路径的容器内的下拉菜单,最好的解决方案是添加一个额外的div,就像这里的解决方案一样。如何将下拉式div放置在剪切路径上?