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

Question

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

Answer 1

如果你想要“onclick”事件，你需要 JavaScript。悬停可以试试这个： http: //line25.com/tutorials/how-to-create-a-pure-css-dropdown-menu

希望能帮助到你！

Answer 2

您所追求的实际上是可能的，尽管我不建议您实际使用这种技术。这无异于黑客攻击，语义上非常不正确，并且可能是 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;   
}

对于一个工作示例，请检查我设置的小提琴：http: //jsfiddle.net/Xj8Ce/