Question

我有一个简单的下拉菜单示例，点击使用AJAX：

http://jsfiddle.net/dmitry313/1s62x8hc/2/

HTML：

<a href="javascript:void(0);" class="dropmenu">Dropdown menu</a>
<ul style="display:none">
    <li><a href="#">Dropdown link 1</a></li>
    <li><a href="#">Dropdown link 2</a></li>
</ul>

SCRIPT：

 $(document).ready(function () {
        var click = function () {
            var divObj = $(this).next();
            var nstyle = divObj.css("display");
            if (nstyle == "none") {
                divObj.slideDown(false, function () {
                    $("html").bind("click", function () {
                        divObj.slideUp();
                    });
                });
            }
        };
        $(".dropmenu").click(click);
    });

是否可以在没有任何脚本的情况下使用CSS进行相同的操作？

编辑：更新了链接

Answer 1

您可以使用黑客触发css点击！

使用复选框!!

示例：

      ul{
            display: none;
        }
        #checkbox{
            opacity: 0;
        }
        #checkbox:checked + ul {
            
            display: block;
        }

    <div class="container">
        <label for="checkbox">Dropdown menu</label>
        <input id="checkbox" type="checkbox" />        
        <ul>
            <li><a href="#">Dropdown link 1</a></li>
            <li><a href="#">Dropdown link 2</a></li>
        </ul>
    </div>

您可以使用过渡来为节目制作隐藏效果:) 这只是一个非常简单的例子!!

提及：这是一个CSS3 hack如果你需要borwser支持旧浏览器，这是行不通的。

Answer 2

不，你需要至少三行javascript。

Answer 3

据我所知，你不能在CSS中使用onClick方法或类似方法。

Answer 4

使用html嵌套列表的纯Html / CSS解决方案 - 仍需要几行JS才能使其成为onClick

http://jsfiddle.net/t1zw41ep/2/

<nav>
<ul>
    <li><a href="#">Dropdown Menu</a>

        <ul>
            <li><a href="#">Dropdown Link 1</a>

            </li>
            <li><a href="#">Dropdown Link 2</a>

            </li>
        </ul>
    </li>
</ul>
</nav>

请参阅：http://line25.com/tutorials/how-to-create-a-pure-css-dropdown-menu

点击使用css制作下拉菜单

4 个答案: