javascript - 没有 js、php 或 target 的下拉点击

Question

我想在没有 JavaScript 的情况下制作 onclick 下拉菜单，也不能使用 PHP。我正在使用目标，但每次单击它时都会跳转页面，因为它不在页面顶部。是否可以不用 JS 和 PHP 制作下拉菜单，但可以点击？

Answer 1

您所追求的实际上是可能的，尽管我不建议您实际使用这种技术。这无异于黑客攻击，在语义上非常不正确，并且可能是 SEO 的噩梦。

考虑到这一点，我将解释该技术作为概念证明:

首先确保您像这样组织您的 html:

<nav>
    <ul>
        <li> 
            <label for='item-1'>main item 1</label>
            <input type="checkbox" id="item-1"/>
            <ul>
                <li><a href="#">sub 1</a></li>
                ...
            </ul>
        </li>
        ...
    </ul>
</nav>

:checked 选择器和兄弟 + 选择器的巧妙使用现在允许您模拟点击时的下拉菜单。相关的 css 如下所示:

/* we hide the checkboxes, they are just there to store the 'state' in the background */
/* their state will be triggered by clicking the corresponding label */
nav input[type="checkbox"] {
    display: none;
}
/* we hide the sub menu's by default */
nav > ul > li > ul {
   display: none;   
}
/* we show the sub menu, if it follows a checked checkbox */
nav input[type="checkbox"]:checked + ul {
   display: block;   
}

对于一个工作示例，检查我设置的 fiddle :http://jsfiddle.net/Xj8Ce/