javascript - 如何防止 javascript 元素在可折叠的导航栏菜单上呈现
问题描述
我正在尝试向我的网站添加完整日历,但日历 div 不断呈现在扩展的导航栏上。
有没有办法让导航栏保持在全日历之上?顶部意味着菜单一旦展开就会隐藏日历。
有关信息,我使用 bootstrap 4 作为样式和 django 作为框架。
这是我的基本模板的正文部分:
<body>
<!-- Header -->
<header id="header">
<!--Loading Navbar-->
{% include 'navbar.html' %}
<div id="branding">
{% block branding %}{% endblock %}
</div>
</header>
<!-- END Header -->
<!-- Container -->
<div id="container">
<!-- Content -->
<div id="content" class="{% block content_container_class %}colM{% endblock %}">
{% block pretitle %}{% endblock %}
{% block content %}{% endblock %}
</div>
<!-- END Content -->
</div>
<!-- END Container -->
{% include 'footer.html' %}
<!-- Load Javascript-->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
{% block script %}{% endblock %}
<!-- End Javascript-->
</body>
我的导航栏:
{% load static %}
<nav class="navbar navbar-expand-md bg-light navbar-light shadow-sm">
<div class="navbar-header justify-content-between d-flex flex-row">
<!-- Toggler/collapsibe Button -->
<button class="navbar-toggler border-0" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
<img src="{% static 'img/navbar-menu.svg' %}" alt="menu" class="nav-menu">
</button>
<!-- Brand -->
<a class="navbar-brand d-lg-none d-xl-none d-md-none" href="#">
<img src="{% static 'img/navbar-logo.png' %}" alt="logo" style="width: 80px;">
</a>
<!-- Search Button-->
<button class="navbar-toggler border-0" type="button" data-toggle="collapse" data-target="#collapsibleSearch">
<a class="navbar-search d-lg-none d-xl-none d-md-none" href="#"><img class="search-logo" src="{% static 'img/navbar-search.svg' %}" alt="" style="width: 24px;"></a>
</button>
</div>
<!-- Navbar links -->
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="nav justify-content-center">
<li class="nav-item">
<a href="{% url 'home' %}" class="nav-link">
<figure class="nav-strip-figure">
<img src="{% static 'img/home.svg' %}" alt="" class="nav-strip-figure-image">
<figcaption class="has-text-weight-normal hero-text caption">Acceuil</figcaption>
</figure>
</a>
</li>
<li class="nav justify-content-center">
<a href="{% url 'event' %}" class="nav-link">
<figure class="nav-strip-figure">
<img src="{% static 'img/event.svg' %}" alt="" class="nav-strip-figure-image">
<figcaption class="has-text-weight-normal hero-text caption">Événements</figcaption>
</figure>
</a>
</li>
<li class="nav justify-content-center">
<a href="{% url 'info' %}" class="nav-link">
<figure class="nav-strip-figure">
<img src="{% static 'img/info.svg' %}" alt="" class="nav-strip-figure-image">
<figcaption class="has-text-weight-normal hero-text caption">Informations</figcaption>
</figure>
</a>
</li>
<li class="nav justify-content-center">
<a href="{% url 'members' %}" class="nav-link">
<figure class="nav-strip-figure">
<img src="{% static 'img/join.svg' %}" alt="" class="nav-strip-figure-image">
<figcaption class="has-text-weight-normal hero-text caption">Rejoindre</figcaption>
</figure>
</a>
</li>
<li class="nav justify-content-center">
<a href="{% url 'contact' %}" class="nav-link">
<figure class="nav-strip-figure">
<img src="{% static 'img/contact.svg' %}" alt="" class="nav-strip-figure-image">
<figcaption class="has-text-weight-normal hero-text caption">Contact</figcaption>
</figure>
</a>
</li>
<li class="nav justify-content-center">
<a href="{% url 'us' %}" class="nav-link">
<figure class="nav-strip-figure">
<img src="{% static 'img/us.svg' %}" alt="" class="nav-strip-figure-image">
<figcaption class="has-text-weight-normal hero-text caption">Nous</figcaption>
</figure>
</a>
</li>
</ul>
</div>
<div class="collapse navbar-collapse" id="collapsibleSearch">
<form class="form-inline" action="">
<div class="input-group">
<input type="text" class="form-control">
<div class="input-group-append">
<button class="border-0 shadow-0" type="submit">
<span class="input-group-text">Rechercher</span>
</button>
</div>
</div>
</form>
</div>
</nav>
这是包含完整日历的页面:
{% extends 'base.html' %}
{% load static %}
{% block header_script %}
<link href='https://cdn.jsdelivr.net/npm/fullcalendar@5.1.0/main.css' rel='stylesheet' />
<script src='https://cdn.jsdelivr.net/npm/fullcalendar@5.1.0/main.js'></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
initialView: 'dayGridMonth',
themeSystem: 'bootstrap',
events: [
{
title: 'Antred Réunion Annuelle',
start: '2020-07-15',
end: '2020-07-15'
}
]
});
calendar.render();
});
</script>
{% endblock %}
{% block content %}
<div id="calendar"></div>
{% endblock %}
感谢大家的帮助!
解决方案
找到了答案,我将导航移至:
<div style="position:relative; z-index:10"></div>
推荐阅读
- html - Django从相关下拉列表中显示多个值
- vb.net - 如何修复 VB.NET 错误“参数无效”?
- ios - SwiftUI 中的页面浏览图片库
- javascript - 处理 AJAX 请求时使用 Observables 的原因
- html - 背景图像滚动功能不起作用
- python - Plotly:如何显示除边际直方图计数之外的其他值?
- flutter - 滚动不适用于 SingleChildScrollView
- ios - 如何在单个项目中处理多个环境支持和不同目标?
- react-native - React Native:Android 9 上 TextAlign 'justify' 的奇怪行为
- docker - 使用 ansible 停止基于公共端口的 docker 容器