Question

我正在使用Bootstrap BS3来构建我的Django website。我正在写dropdown-submenu，它适用于http://www.bootply.com/nZaxpxfiXz#

但是当我将同样的东西应用到我的项目中时，我得到了：

我没有下拉菜单标题旁边的小箭头。所以我无法导航甚至显示如下的子菜单：

Accueil Fiches Individuelles
CréationFichesIndividuelles
...

这是我的剧本：

<!DOCTYPE html>
<html>
    <head>

    {% load staticfiles %}
    {% load user_tags %}

    <title> DatasystemsEC - Accueil </title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="base.js" type="text/javascript"></script>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />   
    <link rel="stylesheet" type="text/css" href="{% static 'css/Base.css' %}"/>
    </head>

    <!-- #################### -->
    <!-- Upper navigation bar -->
    <!-- #################### -->

        <nav class="navbar navbar-inverse">
            <div class="container-fluid">
                <div class="navbar-header">
                    <a class="navbar-brand" href="http://www.datasystems.fr/"> DatasystemsEC </a>
                </div>

                <!-- Home tab -->
                <ul class="nav navbar-nav">
                    <li><a href="{% url "accueil" %}"> <span class="glyphicon glyphicon-home"></span> Accueil </a></li> 

                <!-- Resume Tab with acts -->

                {% if user.is_authenticated %}
                <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Actes Etat Civil <b class="caret"></b></a>
                        <ul class="dropdown-menu">
                            <li class="dropdown dropdown-submenu"><a href="#" class="dropdown-toggle" data-toggle="dropdown">
                                <span class="glyphicon glyphicon-baby-formula"></span> Fiches Individuelles </a>
                                <ul class="dropdown-menu">
                                    <li><a href="#">Accueil Fiches Individuelles</a></li>
                                    <li><a href="#">Création Fiches Individuelles</a></li>
                                    <li><a href="#">Consultation Fiches Individuelles</a></li>
                                    <li><a href="#">Edition Fiches Individuelles</a></li>
                                    <li><a href="#">Suppression Fiches Individuelles</a></li>
                                </ul>
                            </li>
                            <li class="dropdown dropdown-submenu"><a href="#" class="dropdown-toggle" data-toggle="dropdown"> 
                                <span class="glyphicon glyphicon-baby-formula"></span> Actes de Naissance</a>
                                <ul class="dropdown-menu">
                                    <li><a href="#">Accueil Actes de Naissance</a></li>
                                    <li><a href="#">Création Actes de Naissance</a></li>
                                    <li><a href="#">Consultation Actes de Naissance</a></li>

                                </ul>
                            </li>
                        </ul>
                    </li>
                    {% endif %}
                </ul>
            </div>
        </nav>

        {% block content %}
        {% csrf_token %}
        {% endblock content %}
</html>

我也有一个CSS文件：

/* ###################################################### */
/* CSS File about BirthCertificate application properties */
/* ###################################################### */

/* Define background color from upper navbar */
.navbar-inverse {
    background-color: #0083A2;
    }

/* DatasystemsEC tab */
.navbar-inverse .container-fluid .navbar-header .navbar-brand {
    color : white;
    }

/* Tab properties from navbar */
.navbar .nav > li > a {
    color:  white;
    }

.navbar .nav > li > a:hover {
    color:  #454545;
    }

.active {
    background-color: #454545;
    }

/* Titles properties */
h1, h2, h4 {
    color: #0083A2;
    }

/* Define button properties */
.button {

    display: inline;
    margin-left: auto;
    margin-right: auto;
    border-radius: 8px;
    font-size: 16px;
    background-color: #e7e7e7;
    -webkit-transition-duration: 0.2s;
    transition-duration: 0.2s;
    }

/* Define form fields properties */
.form-fields {
    border-radius: 8px;
    margin-right: auto;
    }

.col-sm-6 {
    display:inline-block;
    margin-left : 10px;
    width: 30%;
    list-style: none;
    }

.col-sm-8 {
    list-style: initial;
    }

.col-sm-10 {
    display:inline-block;
    margin-left : 10px;
    width: 800%;
    list-style: none;
    }

/* Hoover button properties */
.button:hover {
    background-color: #0083A2;
    color: #454545;
    }

/* Hoover color dropdown menu */
.dropdown-menu>li>a:hover {
   color: #FFFFFF;
   text-decoration: none;
   background-color: #0083A2;
    }

.logo {
    position : fixed ;
    top:0;
    left:100px;
}

@justify {
    text-align: justify;
}

.marginBottom-0 {margin-bottom:0;}

.dropdown-submenu{position:relative;}
.dropdown-submenu>.dropdown-menu{top:0;left:100%;margin-top:-6px;margin-left:-1px;-webkit-border-radius:0 6px 6px 6px;-moz-border-radius:0 6px 6px 6px;border-radius:0 6px 6px 6px;}
.dropdown-submenu>a:after{display:block;content:" ";float:right;width:0;height:0;border-color:transparent;border-style:solid;border-width:5px 0 5px 5px;border-left-color:#cccccc;margin-top:5px;margin-right:-10px;}
.dropdown-submenu:hover>a:after{border-left-color:#555;}
.dropdown-submenu.pull-left{float:none;}.dropdown-submenu.pull-left>.dropdown-menu{left:-100%;margin-left:10px;-webkit-border-radius:6px 0 6px 6px;-moz-border-radius:6px 0 6px 6px;border-radius:6px 0 6px 6px;}

你有个主意吗？我找不到解决问题的方法

Answer 1

这有效：

<!DOCTYPE html>
<html>
    <head>
    <title> DatasystemsEC - Accueil </title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style>
    .marginBottom-0 {margin-bottom:0;}
    .dropdown-submenu{position:relative;}
    .dropdown-submenu>.dropdown-menu{top:0;left:100%;margin-top:-6px;margin-left:-1px;-webkit-border-radius:0 6px 6px 6px;-moz-border-radius:0 6px 6px 6px;border-radius:0 6px 6px 6px;}
    .dropdown-submenu>a:after{display:block;content:" ";float:right;width:0;height:0;border-color:transparent;border-style:solid;border-width:5px 0 5px 5px;border-left-color:#cccccc;margin-top:5px;margin-right:-10px;}
    .dropdown-submenu:hover>a:after{border-left-color:#555;}
    .dropdown-submenu.pull-left{float:none;}.dropdown-submenu.pull-left>.dropdown-menu{left:-100%;margin-left:10px;-webkit-border-radius:6px 0 6px 6px;-moz-border-radius:6px 0 6px 6px;border-radius:6px 0 6px 6px;}
    </style>
    </head>
    <body>
    <!-- #################### -->
    <!-- Upper navigation bar -->
    <!-- #################### -->
        <nav class="navbar navbar-inverse">
            <div class="container-fluid">
                <div class="navbar-header">
                    <a class="navbar-brand" href="http://www.datasystems.fr/"> DatasystemsEC </a>
                </div>

                <!-- Home tab -->
                <ul class="nav navbar-nav">
                    <li><a href="{% url "accueil" %}"> <span class="glyphicon glyphicon-home"></span> Accueil </a></li> 

                <!-- Resume Tab with acts -->

                <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Actes Etat Civil <b class="caret"></b></a>
                        <ul class="dropdown-menu">
                            <li class="dropdown dropdown-submenu">
                                <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                                    <span class="glyphicon glyphicon-baby-formula">
                                    </span> Fiches Individuelles 
                                </a>
                                <ul class="dropdown-menu">
                                    <li><a href="#">Accueil Fiches Individuelles</a></li>
                                    <li><a href="#">Création Fiches Individuelles</a></li>
                                    <li><a href="#">Consultation Fiches Individuelles</a></li>
                                    <li><a href="#">Edition Fiches Individuelles</a></li>
                                    <li><a href="#">Suppression Fiches Individuelles</a></li>
                                </ul>
                            </li>
                            <li class="dropdown dropdown-submenu"><a href="#" class="dropdown-toggle" data-toggle="dropdown"> 
                                <span class="glyphicon glyphicon-baby-formula"></span> Actes de Naissance</a>
                                <ul class="dropdown-menu">
                                    <li><a href="#">Accueil Actes de Naissance</a></li>
                                    <li><a href="#">Création Actes de Naissance</a></li>
                                    <li><a href="#">Consultation Actes de Naissance</a></li>

                                </ul>
                            </li>
                        </ul>
                    </li>
                </ul>
            </div>
        </nav>
        <script>
            (function($){
                $(document).ready(function(){
                    $('ul.dropdown-menu [data-toggle=dropdown]').on('click', function(event) {
                        event.preventDefault(); 
                        event.stopPropagation(); 
                        $(this).parent().siblings().removeClass('open');
                        $(this).parent().toggleClass('open');
                    });
                });
            })(jQuery);
        </script>   
    </body>     
</html>

您的Base.css和Base.js文件是否包含http://www.bootply.com/nZaxpxfiXz#所需的CSS和JS？

Answer 2

我怀疑你的问题来自javascript和类名，让我解释一下自己：）。

你正在谈论的carret不是那个会触发事件来打开子菜单的人，它应该是由这一行创建的：

.dropdown-submenu > a:after{
    display:block;
    content:" ";
    float:right;
    width:0;
    height:0;
    border-color:transparent;
    border-style:solid;
    border-width:5px 0 5px 5px;
    border-left-color:#cccccc;
    margin-top:5px;
    margin-right:-10px;
}

在您的浏览器中进行调试，以了解为什么此规则被另一个规则推翻，因为您的文件末尾有此规则。

但是在没有显示菜单的carret旁边应该触发，但你说不是这样尝试这个：

你有class="dropdown dropdown-submenu"我觉得它应该是class="dropdown-submenu"而内部<a>应该onclick="return false"所以请尝试更改此内容，看看会发生什么，我在网站上知道你告诉我们它不是那样的，但如果你没有使用与它们完全相同的版本。

onclick="return false"不会在子菜单点击时触发<a>事件，如果您的其他功能尚未完成，则需要该事件。

Answer 3

您正在使用该图标：

  def check_protected
    if CanCan::ControllerResource.new(self).skip?(:authorize)
      # resource is not protected
    else
      # resource is protected
    end
  end

将 glyphicon-baby-formula 更改为您要使用的图标，可能 glyphicon-triangle-right

Boostrap BS3 navbar Clic Dropdown-Submenu

3 个答案: