前端 - 如何实现三级下拉菜单仅选择二级和三级节点（SEO优化）?

Question

比如我有一个三级options，我需要仅能选择二级节点以及三级节点中的节点，而一级节点不能选择，只能展开
具体业务场景：选择区域时，我要求用户选取时需要精确到市级或者县（区）级，而不可只选择省级

没找到相关功能

Answer 1

要实现一个三级下拉菜单，其中一级节点仅用于展开，而用户可以选择二级和三级节点，你可以通过HTML、CSS和JavaScript（可能是jQuery或原生JS）来实现这一功能。以下是一个基本的实现方案：

HTML 结构

你可以使用嵌套的<select>元素（尽管这不是标准做法，因为<select>通常不支持嵌套，但我们可以使用<optgroup>来模拟），或者更常见的是使用<ul>和<li>元素结合JavaScript来创建更灵活的交互。

这里使用<ul>和<li>作为示例：

<ul id="dropdown">
    <li class="level-1">
        <span>一级节点</span>
        <ul class="level-2">
            <li>
                <span>二级节点1</span>
                <ul class="level-3">
                    <li><a href="#">三级节点1-1</a></li>
                    <li><a href="#">三级节点1-2</a></li>
                </ul>
            </li>
            <li>
                <span>二级节点2</span>
                <ul class="level-3">
                    <li><a href="#">三级节点2-1</a></li>
                </ul>
            </li>
        </ul>
    </li>
    <!-- 更多一级节点 -->
</ul>

CSS 样式

你可以添加一些基本的CSS来隐藏非活动的子菜单，并通过JavaScript控制它们的显示：

#dropdown ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.level-2, .level-3 {
    display: none;
}

.level-1 > span:hover + .level-2,
.level-2 > li:hover > .level-3 {
    display: block;
}

/* 注意：上面的hover样式仅用于演示，实际交互可能需要JavaScript */

JavaScript 交互

由于CSS的:hover伪类不能用于模拟点击事件后的状态保持，你需要使用JavaScript来添加类（如.active）来控制子菜单的显示。

document.querySelectorAll('.level-1 > span').forEach(function(span) {
    span.addEventListener('click', function(e) {
        e.preventDefault(); // 阻止默认的点击行为
        var level2 = this.nextElementSibling;
        if (level2.style.display === 'block') {
            level2.style.display = 'none';
        } else {
            level2.style.display = 'block';
            // 隐藏其他已展开的二级菜单（可选）
            document.querySelectorAll('.level-2').forEach(function(otherLevel2) {
                if (otherLevel2 !== level2) {
                    otherLevel2.style.display = 'none';
                }
            });
        }
    });

    // 为三级节点添加点击事件（如果需要）
    // ...
});

注意

• 实际的SEO优化中，使用<select>元素可能更有利，因为搜索引擎可以更好地理解它们。但<select>不支持复杂的嵌套结构，所以你可能需要权衡这一点。
• 如果你的网站需要良好的无障碍性（Accessibility），使用<select>可能是更好的选择，因为屏幕阅读器可以很好地处理它们。
• 上面的JavaScript代码仅用于展示如何控制显示隐藏，你可能需要根据具体需求进行调整。