javascript - 顶部栏在基础 4.3.2 版本中不起作用？-6ren

javascript - 顶部栏在基础 4.3.2 版本中不起作用？

转载作者：行者123 更新时间：2023-11-28 11:03:40

在我之前的元素中，我使用了foundation 4 open source。那个时候我有一个顶部栏导航。但现在我再次尝试与基金会合作的新元素。为此我下载了http://foundation.zurb.com/develop/download-f4.html即foundation4.3.2版本。我在我的新元素中引用了 foundation 4.3.2 版本的 css 和 js，但是没有任何 foundation 的努力，顶部栏没有像 TreeView 一样显示？

如果我引用 foundation 4 ，顶部栏正在工作...... 然后为什么在我审阅基础 4.3.2 版本时顶部栏不工作？

HTML代码

<html>
<head id="head2" runat="server">
<meta charset="UTF-8" />

<asp:ContentPlaceHolder ID="Title" runat="server">
<title>sample project</title>
</asp:ContentPlaceHolder>
<asp:ContentPlaceHolder ID="Head" runat="server">
</asp:ContentPlaceHolder>

<link href="../../Scripts/css/foundation.css" rel="Stylesheet" type="text/css" />

 <script  src="../../Scripts/js/foundation.min.js" type="text/javascript"></script>

 <script  src="../../Scripts/js/vendor/custom.modernizr.js" type="text/javascript"></script>

</head>


<body>

<form id="form1" runat="server">

<div class="row">
<div class="large-12 columns">
<img src="../../Scripts/img/logo.png" />
</div>
</div>

<div class="row">
<div class="large-12 column">
<nav class="top-bar">
<section class="top-bar-section"> 
<ul class="left">
<li class="divider"></li>
<li class="has-dropdown">Moderate</li>
<ul class="dropdown">
<li><a href="#">Moderate Posts</a></li>
<li><a href="#">New Post</a></li>
<li><a href="#">Send E-mail</a></li>
</ul>
<li class="divider"></li>
<li class="has-dropdown">Options</li>
<ul class="dropdown">
<li><a href="#">Statistics</a></li>
<li><a href="#">Users</a></li>
<li><a href="#">Change Password</a></li>
<li><a href="#">Reports</a></li>
</ul>
<li class="divider"></li>
<li class="has-dropdown">Configuration</li>
<ul class="dropdown">
<li><a href="#">Categories</a></li>
<li><a href="#">Fields</a></li>
<li><a href="#">Locations</a></li>
<li><a href="#">Localities</a></li>
<li><a href="#">E-mail Templates</a></li>
<li><a href="#">Admin Users</a></li>
</ul>
</ul>

</section>
</nav>

</div>
</div>

<div class="row" >
    <div class="large-12 columns ">
    <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
    </div>
    </div>


<div class="row" >
    <div class="large-12 columns ">
    Copyright @2014 
      </div>
  </div>

<script type="text/javascript">
    document.write('<script src=' +
  ('__proto__' in {} ? '../../Scripts/js/vendor/zepto' : '../../Scripts/js/vendor/jquery') +
  '.js><\/script>')
  </script> 
<script src="../../Scripts/js/foundation.min.js" type="text/javascript"></script> 
<script src="../../Scripts/js/foundation/foundation.topbar.js"></script>

<script type="text/javascript">
    $(document).foundation();


    function setLayout() {
        winWid = $(window).width();
        if (winWid > 750) {
            $(".trd").each(function (index) {
                ht = $(this).height();
                $(this).parent().closest('.row').find('.advt').css('height', ht - 16 + "px");
            })
        }
    }

    $(window).resize(function () {
        setTimeout("setLayout()", 1000);
    });

    setLayout()

  </script>






</form>

</body>
</html>

注意:我在运行时没有发现任何错误..但是我的网页显示像 TreeView (我使用了 ul 和 li 元素)而没有任何 foundation 4.3.2 版本的努力。

我的网页应该如下图所示 enter image description here

最佳答案

以下应该有效:

<html>
<head id="head2" runat="server">
    <meta charset="UTF-8" />

    <asp:ContentPlaceHolder ID="Title" runat="server">
        <title>sample project</title>
    </asp:ContentPlaceHolder>
    <asp:ContentPlaceHolder ID="Head" runat="server">
    </asp:ContentPlaceHolder>

    <link href="../../Scripts/css/foundation.css" rel="Stylesheet" type="text/css" />
    <script src="../../Scripts/js/vendor/custom.modernizr.js" type="text/javascript"></script>

</head>
<body>

    <form id="form1" runat="server">
        <div class="row">
            <div class="large-12 columns">
                <img src="../../Scripts/img/logo.png" />
            </div>
        </div>

        <div class="row">
            <div class="large-12 column">
                <nav class="top-bar">
                    <section class="top-bar-section">
                        <ul class="left">
                            <li class="divider"></li>
                            <li class="has-dropdown"><a href="#">Moderate</a>
                                <ul class="dropdown">
                                    <li><a href="#">Moderate Posts</a></li>
                                    <li><a href="#">New Post</a></li>
                                    <li><a href="#">Send E-mail</a></li>
                                </ul>
                            </li>
                            <li class="divider"></li>
                            <li class="has-dropdown"><a href="#">Options</a>
                                <ul class="dropdown">
                                    <li><a href="#">Statistics</a></li>
                                    <li><a href="#">Users</a></li>
                                    <li><a href="#">Change Password</a></li>
                                    <li><a href="#">Reports</a></li>
                                </ul>
                            </li>
                            <li class="divider"></li>
                            <li class="has-dropdown"><a href="#">Configuration</a>
                                <ul class="dropdown">
                                    <li><a href="#">Categories</a></li>
                                    <li><a href="#">Fields</a></li>
                                    <li><a href="#">Locations</a></li>
                                    <li><a href="#">Localities</a></li>
                                    <li><a href="#">E-mail Templates</a></li>
                                    <li><a href="#">Admin Users</a></li>
                                </ul>
                            </li>
                        </ul>
                    </section>
                </nav>
            </div>
        </div>

        <div class="row">
            <div class="large-12 columns ">
                <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
                </asp:ContentPlaceHolder>
            </div>
        </div>

        <div class="row">
            <div class="large-12 columns ">
                Copyright @2014
            </div>
        </div>

        <script type="text/javascript">
            document.write('<script src=' +
                ('__proto__' in {} ? '../../Scripts/js/vendor/zepto' : '../../Scripts/js/vendor/jquery') +
                '.js><\/script>');
        </script>

        <script src="../../Scripts/js/foundation.min.js" type="text/javascript"></script>

        <script type="text/javascript">
            $(document).foundation();


            function setLayout() {
                winWid = $(window).width();
                if (winWid > 750) {
                    $(".trd").each(function (index) {
                        ht = $(this).height();
                        $(this).parent().closest('.row').find('.advt').css('height', ht - 16 + "px");
                    })
                }
            }

            $(window).resize(function () {
                setTimeout("setLayout()", 1000);
            });

            setLayout()

        </script>
    </form>
</body>
</html>

我在这里做了一些事情。首先，我只是对代码进行了格式化，以便于阅读。其次，我删除了头部对 foundation.min.js 的调用。您在主体的底部调用 foundation.min.js，将它包含两次可能会导致命名变量混淆。我还删除了您对 foundation.topbar.js 的调用，因为该文件包含在您已经包含的缩小脚本中。最后，我重新设计了您的下拉菜单，以便 Foundation 可以正确解释它们。 Foundation 期望下拉菜单位于父 li 元素的内。我还根据 Foundation 文档将下拉列表 li 文本制作成 anchor 。

哦，我在包含 jQuery/zepto 的 document.write() 语句中添加了一个分号。

关于javascript - 顶部栏在基础 4.3.2 版本中不起作用？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/22343183/

文章推荐： javascript - 如何在打开模式对话框时禁用控件单击事件

文章推荐： css - 在 SASS 中划分变量的最简单方法是什么？

文章推荐： html - 如何在 Bootstrap 中从左向右移动选择框下拉箭头

文章推荐： html - 在输入字段之间添加字符

实例分析Try {} Catch{} 作用
今天有小伙伴给我留言问到，try{...}catch(){...}是什么意思？它用来干什么？简单的说他们是用来捕获异常的下面我们通过一个例子来详细讲解下
html - 列表社交媒体链接的 ARIA 作用
我正在努力提高网站的可访问性，但我不知道如何在页脚中标记社交媒体链接列表。这些链接指向我在 facecook、twitter 等上的帐户。我不想用 role="navigation" 标记这些链接，因
java.util.Timer SystemTime 作用？
说现在是 6 点，我有一个 Timer 并在 10 点安排了一个 TimerTask。之后，System DateTime 被其他服务(例如 ntp)调整为 9 点钟。我仍然希望我的 TimerTas
php - 什么是 Doctrine hydration 作用？
就目前而言，这个问题不适合我们的问答形式。我们希望答案得到事实、引用资料或专业知识的支持，但这个问题可能会引发辩论、争论、投票或扩展讨论。如果您觉得这个问题可以改进并可能重新打开，visit the
python入门:argparse浅析 nargs='+'作用
我就废话不多说了，大家还是直接看代码吧~ ? 1
Maven是什么?Maven的概念+作用+仓库的介绍+常用命令的详解
Maven系列1 1.什么是Maven？ Maven是一个项目管理工具，它包含了一个对象模型。一组标准集合，一个依赖管理系统。和用来运行定义在生命周期阶段中插件目标和逻辑。核心功能 Mav

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 顶部栏在基础 4.3.2 版本中不起作用？