Question

我对HTML很新，有没有办法压缩这段代码，这只是为了下拉菜单。我觉得它可以短得多。另外，我知道其他一些问题，我现在正在尝试一些新的东西。提前谢谢。

<ul>
    <div class="dropdown">
        <button class="dropbtn">Home</button>
    </div>
    <div class="dropdown">
        <button class="dropbtn">About Us</button>
        <div class="dropdown-content">
            <a href="#">Who We Are</a>
            <a href="#">Histroy</a>
            <a href="#">First-Due Map</a>
        </div>
    </div>
    <div class="dropdown">
        <button class="dropbtn">Apparatus</button>
        <div class="dropdown-content">
            <a href="#">Engine 301</a>
            <a href="#">Engine 302</a>
            <a href="#">Squad 303</a>
            <a href="#">Utility 304</a>
            <a href="#">Utility 306</a>
            <a href="#">Engine 307</a>
            <a href="#">Antique Engine 309</a>
            <a href="#">Antique Hose Reel</a>
        </div>
    </div>
    <div class="dropdown">
        <button class="dropbtn">Members</button>
        <div class="dropdown-content">
            <a href="#">Top Responders</a>
            <a href="#">Officers</a>
        </div>
    </div>
    <div class="dropdown">
        <button class="dropbtn">Calls</button>
        <div class="dropdown-content">
            <a href="#">Stories</a>
            <a href="#">Call Statistics</a>
        </div>
    </div>
    <div class="dropdown">
        <button class="dropbtn">Media</button>
        <div class="dropdown-content">
            <a href="#">Images</a>
            <a href="#">Videos</a>
        </div>
    </div>
    <div class="dropdown">
        <button class="dropbtn">Links</button>
        <div class="dropdown-content">
            <a href="#">Stations</a>
            <a href="#">Baltimore County Fire Department</a>
            <a href="#">Baltimore County Police Department</a>
        </div>
    </div>
    <div class="dropdown">
        <button class="dropbtn">Join LVFC</button>
    </div>
    <div class="dropdown">
        <button class="dropbtn">Contact Us</button>
    </div>
    </div>
    </nav>
</ul>

CSS：

.dropbtn { background-color: #000000;
           color: #ffffff;
           padding: 16px;
           font-size: 16px;
           border: none;
           cursor: pointer; }

.dropdown { position: relative;
            display: inline-block; }

.dropdown-content { display: none;
                    position: absolute;
                    background-color: #f9f9f9;
                    min-width: 160px;
                    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); }

.dropdown-content a { color: #000000;
                      padding: 12px 16px;
                      text-decoration: none;
                      display: block; }

.dropdown-content a:hover {background-color: #D6B813}

.dropdown:hover .dropdown-content { display: block; }

.dropdown:hover .dropbtn { background-color: #D6B813;
                           color: #000000; }

ul { background-color: #000000; }

Answer 1

写作＆＃34;写作＆＃34; HTML，是的，这是唯一/简单的方法。如果你正在迎接挑战，你可以学习一些PHP。使用这种语言，您可以将整个导航编写为如下对象：

[
  { title: 'Home', href: '/home' },
  { title: 'About', href: '/about' },
  ...
]

然后让PHP动态地将该对象转换为html。

以下是有关如何操作的简单教程：http://www.onlamp.com/pub/a/php/2001/05/03/php_foundations.html

Answer 2

如果您有所了解，那么您可以使用它来编写使用JSON生成HTML代码的迭代代码。看看下面的例子。

var listItems = "";

var links = {
  "Engine 301": "#",
  "Engine 302": "#",
  "Squad 303": "#",
  "Utility 304": "#",
  "Utility 306": "#",
  "Engine 307": "#",
  "Antique Engine 309": "#",
  "Antique Hose Reel": "#"
};

var keys = Object.keys(links);

for (var index in keys) {
  listItems += "<li><a href=" + links[keys[index]] + ">" + keys[index] + "</a></li>";
}
document.getElementById("list").innerHTML = listItems;

<ul id="list">
</ul>

Answer 3

你是对的 - 它可以更短。但它肯定不能仅用HTML完成。你说你是HTML的新手，你可能不愿意这样做。但是如果您对Javascript有所了解，那么您有两种选择：

使用Javascript / jQuery将所有链接文本存储在一个数组中，并在运行时创建它们。
使用AngularJS执行第1点中提到的相同操作。（因为它很有效）。

使用jQuery的示例：

<div class="dropdown-content"></div>

------------------------------------

LinkTexts = ["Engine 301","Engine 302","Squad 303","Utility 304","Utility 306"]; /*Array Variable*/
for(i=0;i<LinkTexts.length;i++)
    $(".dropdown-content").append("<a href='#'>"+LinkTexts[i]+"</a>");

输出：

<div class="dropdown-content">
    <a href="#">Engine 301</a>
    <a href="#">Engine 302</a>
    <a href="#">Squad 303</a>
    <a href="#">Utility 304</a>
    <a href="#">Utility 306</a>
</div>

使用AngularJS的示例：

<body ng-app="myApp" ng-controller="myCtrl">
    <div class="dropdown-content">
        <a href="#" ng-repeat="x in LinkTexts">{{x}}</a>
    </div>
    <script>
        var app = angular.module("myApp", []);
        app.controller("myCtrl", function($scope) {
        $scope.LinkTexts = ["Engine 301","Engine 302","Squad 303","Utility 304","Utility 306"]; /*Scope Array Variable*/
        });
    </script>
</body>

输出：

<div class="dropdown-content">
    <a href="#">Engine 301</a>
    <a href="#">Engine 302</a>
    <a href="#">Squad 303</a>
    <a href="#">Utility 304</a>
    <a href="#">Utility 306</a>
</div>

现在，您可能想知道＆＃34;＆＃39;额外位＆＃39;代码应该让事情变得简单？＆＃34;。 AngularJS的一个优点是，只要范围变量发生变化，变化就会自动立即反映到各处。

例如，如果您向范围数组变量添加另一个值，它会自动添加到dropdown-content div下作为超链接（非常酷吗？）。这样，创建数百个重复的标签变得容易（想象一下创建一个表！）。

相反，为了实现与Javascript / jQuery相同，我们必须触发一个函数将新添加的变量添加到文档中。

所以，现在它完全取决于你 - 它会是什么样的？

有没有更简单的方法来编写此HTML代码？

3 个答案: