zurb-foundation - 如何在 Zurb Foundation 顶部栏中禁用菜单条目

Question

在 Web 应用程序（= 多用户环境）中，我需要禁用顶部栏中的某些菜单条目，具体取决于当前登录的用户等。为了保持 UI 的一致性，隐藏/省略菜单条目不是一个选项。显然，框架不支持添加 disabled/inactive/whatsoever 类，这是在其他基础元素（例如按钮）上进行的方式。

<li><a class="disabled" href="#">Disabled Menu Entry</a></li>

有任何想法吗？

Answer 1

您的问题与基金会“直接”无关。禁用和/或隐藏元素是 CSS 或 javascript。您不能直接禁用锚标记，但可以模拟它的“禁用行为”。根据您拥有的逻辑，您将如何确定是否应禁用锚标记，您可以执行以下操作：

<style>
.disabled-link {
    text-decoration:none; // really not needed for the Top Bar, just for general technique
    cursor: auto;
}
</style>
<script>
$(document).ready(function(){
    $(".disabled-link").click(function(e){
        e.preventDefault();
        return false;
    });
});
</script>
<a class="disabled-link" href="#">Disabled Menu Entry</a>

请注意，disabled-link应根据某些逻辑在此处应用该类，这取决于您的服务器端代码-您没有告诉我们您使用了哪些其他工具。如果您使用的是 ASP.Net、PHP 或其他。

此外，您应该记住在服务器上进行验证，因为无法阻止您的用户规避链接的禁用行为。