Невозможно добавить выпадающее меню, которое выталкивает содержимое вниз при выделении - DJANGO - PullRequest
Новая
       1

Невозможно добавить выпадающее меню, которое выталкивает содержимое вниз при выделении - DJANGO

0 голосов
/ 07 февраля 2020

Используя Django, я пытаюсь создать раскрывающееся меню, которое выталкивает содержимое под ним, когда вы выбираете его. Я использовал этот сайт W3 в качестве руководства, поскольку это именно то, что мне нужно с точки зрения функциональности.

Я изо всех сил пытаюсь заставить это работать. Я подозреваю, что моя проблема связана с javascript, но у меня нет опыта в этой области.

  • Я сбросил расположение папки stati c в моем settings.py
  • Я попытался ввести JS с помощью тегов <src=..> в шаблоне html, но не работает
  • Попытался импортировать в файл .css (в крайнем случае, не уверен, что вы должны это сделать).

Я бы подумал, что это было что-то, что bootstrap может сделать, но, видимо, это слишком ниша ??

Структура локальной системы = https://imgur.com/a/bzYSntm (исключая ненужные приложения)

JS file = dropdown -меню. js

var dropdown = document.getElementsByClassName("dropdown-btn-me");
var i;

for (i = 0; i < dropdown.length; i++) {
  dropdown[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var dropdownContent = this.nextElementSibling;
    if (dropdownContent.style.display === "block") {
      dropdownContent.style.display = "none";
    } else {
      dropdownContent.style.display = "block";
    }
  });
}

Соответствующий CSS = основной. css файл 

/* this class is the self-made drop-down box in sidenav */
.dropdown-nav {
    height: 100%;
    width: 200px;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: #111;
    overflow-x: hidden;
    padding-top: 20px;
}

/* styling for the self-made drop-down box in sidenav */
.dropdown-nav a, .dropdown-btn-me {
    padding: 6px 8px 6px 16px;
    text-decoration: none;
    font-size: 20px;
    color: #818181;
    display: block;
    border: none;
    background: none;
    width:100%;
    text-align: left;
    cursor: pointer;
    outline: none;
}  

/* change navbar color on mouse-over */
.dropdown-nav a:hover, .dropdown-btn-me:hover {
    color: #f1f1f1;
}

/* Main content */
.main {
  margin-left: 200px; /* Same as the width of the sidenav */
  font-size: 20px; /* Increased text to enable scrolling */
  padding: 0px 10px;
}

/* Add an active class to the active dropdown button */
.active {
  background-color: green;
  color: white;
}

/* Dropdown container (hidden by default). Optional: add a lighter background color and some left padding to change the design of the dropdown content */
.dropdown-container-me {
  display: none;
  background-color: #262626;
  padding-left: 8px;
}

/* Optional: Style the caret down icon */
.fa-caret-down {
  float: right;
  padding-right: 8px;
}

Весь шаблон = база. html 

{% load static %}
<!-- enables you to load all CSS files from 'static' folder-->
<!-- part 1 of 2. Note you also need to load using <link> in <head> -->

<!DOCTYPE html>
<html>
<head>
    <!-- Start bootstrap 4 header-->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <!-- End bootstrap 4 header tags-->
    <link rel="stylesheet" type="text/css" href="{% static 'dashboard/main.css' %}">
    <!-- Part 2 of 2, this <link> links to main.css stylesheet via an absolute URL -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <!-- load jQuery from the closest Google server -->
    <script src="{% static 'dashboard/dropdown-menu.js' %}"></script>
    <!-- loads static javascript for the drop-down. Unsure if working correctly -->
    """ the highlighted colour is wrong for the javascript """
    {% if title %}
        <title>IdentiFind - {{ title }}</title>
    {% else %}
        <title>IdentiFind</title>
    {% endif %}

</head>
<body>
    <!-- Start bootstrap 4 navbar -->
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
      <a class="navbar-brand" href="{% url 'home-dashboard' %}">IdentiFind</a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>

      <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav mr-auto">
          <li class="nav-item active">
            <a class="nav-link" href="{% url 'home-dashboard' %}">Home <span class="sr-only">(current)</span></a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="{% url 'about' %}">About</a>
          </li>
        </ul>
        </div>
        <!-- Navbar right hand side -->
        <div class="navbar-nav">
            {% if user.is_authenticated %}
                <!-- is_authenticated is from django lib that checks if a user is logged in or not -->
                <!-- 'user' is stock django language, no need to pass this in -->
                <div class="row">
                <a class="nav-item nav-link" href="#">Profile</a>
                <a class="nav-item nav-link px-2" href="#">Make a new post</a>
                <a class="nav-item nav-link px-2" href="#">Logout</a>
                </div>
            {% else %}
                <div class="row">
                <a class="nav-item nav-link px-2" href="#">Login</a>
                <!-- px-2 gives spacing of 2*0.5 on left & right of item -->
                <a class="nav-item nav-link px-2" href="#">Register</a>
                </div>
            {% endif %}
        </div>
        <!-- End navbar right hand side -->
    </nav>
    <!-- End Bootstrap 4 navbar -->

    <!-- sidebar navbar -->
    <!-- the below if statement stops sidebar from being displayed on login page-->
    {% url 'login' as the_url %}
    {% if the_url != request.get_full_path %}
        <div class="blank-row d-none d-sm-block"></div>
        <!-- this line ensures a nice blank space between navbar & content -->
        <!-- removes this line on small screens -->
        <main role="main" class="container">
                 <!-- start sidebar flex-xl-nowrap-->
            <div class="row">
                <!-- defining rows allows you to use columns & grid spacing -->
                <div class="col-md-3 content-section ml-auto d-none d-sm-block">
                    <!-- col-md-3 means this class will take up 3/12 medium (md) size cols-->
                    <!-- content-section makes a nice white box around the area -->
                    <!-- ml-auto creates automatic separation depending on screen size-->
                     <h3>Pop-down navbar here (disappear on mobile)</h3>
                     <p class='text-muted'>Insert buttons & drop-down headers.
                     <br>Follow design below. Match colour scheme with navbar.
                        <div class="dropdown-nav">
                            <a href="#">About Us</a>
                            <a href="#">Contact Us</a>
                            <button class="dropdown-btn-me">Dropdown button
                                <i class="fa fa-caret-down"></i>
                            </button>
                            <div class="dropdown-container-me">
                             <a class="dropdown-item" href="#">DropD 1</a>
                             <a class="dropdown-item" href="#">DropD 2</a>
                             <a class="dropdown-item" href="#">DropD 3</a>
                            </div>
                        </div>
                     </p>
                </div>

                   <!-- End sidebar -->
            <div class="col-md-7 ml-auto content-section">
                {% block content %}
                    <h1>content test</h1>
                {% endblock content %}
            </div>
            </div>
        </main>

       {% endif %}
       <!-- block login displays login forms--> 
       {% block login %}
       {% endblock login %}


    </div>

     <!-- footer below -->
     <footer class="footer">
      <div class="container">
        <small class="text-muted">(C) 2020 </small>
        <small> <a href="{% url 'about' %}">IdentiFind </a></small>
        <small class="text-muted">All Rights Unreserved.</small>
        <small> <a href="{% url 'terms-of-service' %}">Terms of Service</a></small>
        <small class="text-muted"> and our </small>
        <small> <a href="{% url 'privacy-policy' %}">Privacy Policy.</a></small>
      </div>
    </footer>

    <!-- Bootstrap 4 tags-->
    <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>
</body>
</html>

Соответствующие настройки.py = 

STATIC_URL = '/static/'
STATIC_ROOT = os.path.join(BASE_DIR, 'static')
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...