Jquery 引导下拉菜单在移动模式下不可见_Jquery_Twitter Bootstrap

Jquery 引导下拉菜单在移动模式下不可见

jquery twitter-bootstrap

Jquery 引导下拉菜单在移动模式下不可见,jquery,twitter-bootstrap,Jquery,Twitter Bootstrap,当我在PC模式下使用我的大屏幕时，我用Bootstrap创建的菜单会正确显示，没有任何问题。但是，当我将浏览器缩小到“移动视图”并单击右上角的菜单时，菜单的组件不会出现意见如下: 正常模式：在移动模式下：图1：图2：正如你所看到的，菜单的内容不见了。我的剧本： <!DOCTYPE html> <html lang="fr" xmlns="http://www.w3.org/1999/xhtml" xmlns:ui="http://java.sun.

当我在PC模式下使用我的大屏幕时，我用Bootstrap创建的菜单会正确显示，没有任何问题。但是，当我将浏览器缩小到“移动视图”并单击右上角的菜单时，菜单的组件不会出现

意见如下:

正常模式：

在移动模式下：

图1：

图2：

正如你所看到的，菜单的内容不见了。我的剧本：

<!DOCTYPE html>

<html lang="fr" xmlns="http://www.w3.org/1999/xhtml"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:p="http://primefaces.org/ui">



<h:head>

    <title>Site FRC</title>

    <meta charset="utf-8"/>

    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>

    <meta name="viewport" content="width=device-width, initial-scale=1"/>

    <h:outputStylesheet library="css" name="styles.css"></h:outputStylesheet>

    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"/>
    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet"/>

    <style type="text/css">

        body {
            background-color: #aaa;
            padding-top: 10px;
        }

        [class*="col-"] {
            margin-bottom: 20px;
        }


        .well {
            background-color: #CCC;
            padding: 20px;
        }

        a:active, a:focus {
            outline: none;
        }

        .inline-form input {
            display: inline-block;
            width: 100px;
        }



    </style>


</h:head>

<h:body>


    <div class="container">

    <ui:include src="/template/common/commonHeader.xhtml" />


        <div class="alert alert-warning alert-dismissable col-lg-6">
            <button type="button" class="close" data-dismiss="alert">&#215;</button>
            <strong>Information : </strong> Le site web est toujours en cours de
            développement
        </div>


        <br /> <br /><br /> <br /><br />




        <p:chart type="bar" model="#{chartView.barModel}" style="height:300px" />

        <p:chart type="bar" model="#{chartView.horizontalBarModel}"
                    style="height:300px" />




        <br/> <br/><br/>





    <ui:include src="/template/common/commonFooter.xhtml" /> 



    </div>


    <h:outputScript name = "/js/bootstrap.js" /> 
    <h:outputScript name = "/js/bootstrap..min.js" /> 




</h:body>

</html>


站点FRC
身体{
背景色：#aaa；
填充顶部：10px；
}
[类别*=“列-”]{
边缘底部：20px；
}
.嗯{
背景色：#CCC；
填充：20px；
}
a:主动，a:专注{
大纲：无；
}
.内联表单输入{
显示：内联块；
宽度：100px；
}
×
信息：我们的网站是免费的
发展

编辑以下是我的菜单脚本：

    <!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:p="http://primefaces.org/ui">

<h:head>


    <meta charset="utf-8"/>

    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>

    <meta name="viewport" content="width=device-width, initial-scale=1"/>



</h:head>

<h:body>

<ui:composition>

<!--Menu déroulant-->


      <nav class="navbar navbar-inverse" role="navigation">   
        <div class="navbar-header">   
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="index.xhtml">FRC</a>
        </div>



        <div class="collapse navbar-collapse">

          <ul class="nav navbar-nav">

            <li> <a href="index.xhtml">Accueil</a> </li>

            <li class="dropdown"> 
              <a data-toggle="dropdown" href="#">Tableaux de données <b class="caret"></b></a>
              <ul class="dropdown-menu">
              <li class="dropdown-header">Consultation</li>          
              <li><a href="#"><span class="glyphicon glyphicon-screenshot"></span> Tout consulter</a></li>
              <li><a href="tableauxFiltrage.xhtml"><span class="glyphicon glyphicon-screenshot"></span> Par filtrage</a></li>
              <li class="divider"></li>
              <li class="dropdown-header">Exporter</li>
              <li><a href="ExporterDonnee.xhtml"><span class="glyphicon glyphicon-list-alt"></span> Exporter les données</a></li>
              </ul>
            </li> 

            <li class="dropdown"> 
              <a data-toggle="dropdown" href="#">Graphiques <b class="caret"></b></a>
              <ul class="dropdown-menu">
              <li class="dropdown-header"> Génerale</li>
              <li><a href="graphiqueEvolution.xhtml"><span class="glyphicon glyphicon-screenshot"></span> Evolution</a></li>
              <li class="divider"></li>
              <li class="dropdown-header"> Autres</li>
              <li><a href="#"><span class="glyphicon glyphicon-list-alt"></span> Autres</a></li>
              </ul>
            </li> 

            <li> <a href="#">Contact</a> </li>

          </ul>

          <h:form class="navbar-form navbar-right inline-form" role="form">
            <div class="form-group">
              <h:inputText id="search" value ="" class="input-sm form-control" placeholder="Recherche"></h:inputText>
              <h:commandButton  value="Rechercher" onclick = "alert('Hello World!');"  class="btn btn-primary btn-sm"><span class="glyphicon glyphicon-eye-open"></span> Chercher</h:commandButton>
            </div>
          </h:form>

        </div>
      </nav>


<!--Menu déroulant-->

</ui:composition>



</h:body>
</html>






咨询



导出器





Gégenerale


Autres





切彻

这只是bootstrap移动菜单的模式。在替换菜单的sqare中单击时，如果正确应用了脚本，则会显示菜单。就这样

请参见上面的链接：编辑：我的同事，我以为你在抱怨按钮

好的，您可能没有

show

属性

在导航项所在的CSS中，添加以下内容

.collapse.show{
显示：块；
}

如果您知道引导菜单在小屏幕中消失并在单击显示菜单时变为小正方形的行为，这可能会起作用。

在小屏幕调整浏览器大小后，检查是否有一些透明的div或其他html元素覆盖了菜单。如果你有一些HTML元素覆盖了它，它会阻止你点击菜单。

我遵循相同的脚本，但当我点击按钮显示菜单时，什么都没有发生。就像克劳迪奥一样，我也认为用户在抱怨汉堡图标。OP抱怨的问题是，当菜单展开时，菜单不可见不，我没有额外的div或其他内容..：/是的，就像我原来的帖子一样，你需要删除

collapse

类。查看我的更新答案我编辑我的帖子以向您显示更改，但我确实希望保留按钮以在移动模式下显示我的菜单..：/哦，我明白了。下拉列表中缺少菜单。我正在使用bootstrap.css CDN，但是当我将您的脚本添加到xhtml页面时，它仍然是一样的，对我不起作用：/Why不在inspector中检查一下发生了什么？