隐藏在css网格列中的JavaScript下拉菜单，并应用剪切路径。

问题描述 投票：0回答：3

我有一个Django的管理员头像，用css网格分成两列。我在用户图标上加入了一个JavaScript下拉效果，以显示其他元素，如 "更改密码 "和 "注销"，但问题是下拉效果隐藏在列内，不显示在列外。

我需要提到的是，下拉式停留在一个容器中，并带有 剪贴路径：多边形 应用。

如何解决这个问题？

先谢谢你了。

一个网站开发的新手

附上的图片会显示出上述的情况。enter image description here

为了显示下拉菜单而强制增加头部高度。enter image description here

下面你可以找到部分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;}
javascript css django grid django-admin
3个回答
0
投票

下拉内容需要绝对定位，并且要比你想显示的内容有更高的z-index。

一个codepen或者类似的东西会让这个问题更容易帮助解决。

0
投票

我已经把你的代码复制到下面的代码段中，并做了注释。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%); 评论中提到

0
投票

对于一个带有剪切路径的容器内的下拉菜单，最好的解决方案是添加一个额外的div，就像这里的解决方案一样。如何将下拉式div放置在剪切路径上？

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.