html - 不显示切换。姜戈

Question

我目前正在关注本教程，但使用的是从 w3layouts 获得的我自己的模板。我把它作为一个练习项目来更好地学习 Django。我目前正在尝试实现用户登录/注册页面。

当您单击代表用户的图标/图像时，您应该会看到我的帐户、我的收藏夹、我的购物车等的下拉菜单。

由于我使用的模板与视频中的模板不同，因此我了解可能存在问题。

The following is the Lecturers( guys tutorial I'm following) drop down for user functionality.

   <li class="header-account dropdown default-dropdown">
                        {% if user.id is not None %}
                            <div class="dropdown-toggle" role="button" data-toggle="dropdown" aria-expanded="true">
                                <div class="header-btns-icon">
                                    <img src="{{ request.session.userimage }}" style="height: 40px; border-radius: 30%">
                                </div>
                                <strong class="text-uppercase">{{ user.first_name }} <i class="fa fa-caret-down"></i></strong>
                            </div>
                        {% else %}
                            <a href="{% url 'login' %}" class="text-uppercase">Login</a> / <a href="{% url 'signup' %}" class="text-uppercase">Sign Up</a>
                        {% endif %}

                        <ul class="custom-menu">
                            <li><a href="{% url 'user_index' %}"><i class="fa fa-user-o"></i> {% trans "My Account" %}</a></li>
                            <li><a href="#"><i class="fa fa-heart-o"></i> {% trans "My Favorits" %}</a></li>
                            <li><a href="{% url 'user_orders' %}"><i class="fa fa-exchange"></i> {% trans "My Orders " %}</a></li>
                            <li><a href="{% url 'user_comments' %}"><i class="fa fa-check"></i> {% trans "My Comments" %}</a></li>
                            <li><a href="{% url 'logout' %}"><i class="fa fa-unlock-alt"></i> {% trans "Logout" %}</a></li>

                        </ul>
                    </li>

这是我的。

ul class="top-hnt-right-content col-lg-6">

                <li class=" header-account dropdown default-dropdown button-log usernhy  ">

                        

                        {% if user.id is not None %}

           
                         <div class="dropdown-toggle" role="button" data-toggle="dropdown" aria-expanded="true">
                                <div class="header-btns-icon">
                                    <img src="{{ request.session.userimage }}" style="height: 40px; border-radius: 30%">
                                </div>
                                <strong class="text-uppercase">{{ user.first_name }} <i class="fa fa-caret-down"></i></strong>
                            </div>
                        {% else %}
                            <a href="{% url 'login' %}" class="btn-open"> <span class="fa fa-user" aria-hidden="true"> Log In </span></a> 
                            <a href="{% url 'signup' %}" class="btn-open"> <span class="fa fa-user" aria-hidden="true">Sing Up </span></a>
                        {% endif %}

                        <ul class="custom-menu wrap overlay-login text-left">
                            <li><a href="{% url 'user_index' %}"><i class="fa fa-user-o"></i> {% trans "My Account" %}</a></li>
                            <li><a href="#"><i class="fa fa-heart-o"></i> {% trans "My Favorits" %}</a></li>
                            <li><a href="{% url 'user_orders' %}"><i class="fa fa-exchange"></i> {% trans "My Orders " %}</a></li>
                            <li><a href="{% url 'user_comments' %}"><i class="fa fa-check"></i> {% trans "My Comments" %}</a></li>
                            <li><a href="{% url 'logout' %}"><i class="fa fa-unlock-alt"></i> {% trans "Logout" %}</a></li>

                        </ul>
                       
                    </a> 
                </li>

这是我的CSS。

  .w3l-banner-slider-main .overlay-login button.overlay-close1 {
    z-index: 9999;
    color: #000; }
 .w3l-banner-slider-main .overlay-login button.overlay-close1 {
    z-index: 999;
    color: #fff;
    right: 0;
    width: 40px;
    height: 40px;
    position: absolute;
    left: 20px;
    top: 20px;
    overflow: hidden;
    background: none;
    color: #fff;
    border: 2px solid #232020;
    cursor: pointer;
    border-radius: 6px;
    -webkit-border-radius: 6px;
    -o-border-radius: 6px;
    -moz-border-radius: 6px; }
  .w3l-banner-slider-main .overlay-login {
    display: none;
    position: fixed;
    top: 0;
    background: #3a3535;
    overflow: auto;
    z-index: 9999;
    padding: 3em 3em;
    right: 0;
    height: 100%;
    transition: 0.5s all;
    -webkit-transition: 0.5s all;
    -moz-transition: 0.5s all;
    -o-transition: 0.5s all;
    -ms-transition: 0.5s all; }
.w3l-banner-slider-main .overlay-login {
    display: none;
    position: fixed;
    top: 0;
    background: #3a3535;
    overflow: auto;
    z-index: 9999;
    padding: 3em 3em;
    right: 0;
    height: 100%;
    transition: 0.5s all;
    -webkit-transition: 0.5s all;
    -moz-transition: 0.5s all;
    -o-transition: 0.5s all;
    -ms-transition: 0.5s all; }
   .w3l-banner-slider-main .overlay-login {
      padding: 2em 2em; } }

注册后，我什至无法单击图标/图像以退出登录。我知道这可能是一个 CSS 问题，但我也不是网页设计师，并且已经开始使用 python 进行编程。

任何帮助将不胜感激。

标签： htmlcssdjangodrop-down-menu