个人中心
gpt4 book ai didi

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

转载 作者：行者123 更新时间：2023-11-28 11:03:40 25 4
gpt4 key购买 nike

在我之前的元素中，我使用了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/

25 4 0
文章推荐： javascript - 如何在打开模式对话框时禁用控件单击事件
文章推荐： css - 在 SASS 中划分变量的最简单方法是什么？
文章推荐： html - 如何在 Bootstrap 中从左向右移动选择框下拉箭头
文章推荐： html - 在输入字段之间添加字符
行者123
个人简介

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

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com