Foundation

Foundation

关注
发信
关注(28)粉丝(399)

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

在上一个项目中，我使用了Foundation 4开源。那个时候我有一个顶级的导航栏。但是现在再次尝试有基础的新项目。为此，我下载了Foundation4.3.2版本的http://foundation.zurb.com/develop/download-f4.html。我在新项目中引用了Foundation 4.3.2版本的CSS和JS，但是在没有任何基础工作的情况下，顶栏没有像树视图那样显示吗？

如果我提到基础4，顶杆正在工作...
  然后
 为什么在参考Foundation 4.3.2版本时Top-bar无法正常工作？

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>


注意：我在运行时没有发现错误。.但是我的网页显示为树状视图（我使用ul和li元素），而无需任何基础4.3.2版本的努力。

我的网页应如下图所示

最佳答案

以下应该工作：

<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文本设置为锚。

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

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

10-13 02:47
Powered by LMLPHP ©2024 Foundation 0.026717