javascript - 带有扩展列表的下拉菜单

Question

我想创建流畅的下拉菜单。这个想法是:当点击橙色元素时它会切换黑色元素，当点击黑色元素时它会切换灰色元素。但我得到的是覆盖橙色元素的黑色元素，灰色元素已经切换。我在所有地方都使用了 display:none; 以确保它不会显示，并且...单击橙色元素后一切都会切换。使用 .hide() 也不想帮助隐藏这些元素。我怎样才能使这个黑框(在 click 事件之后)切换到橙色元素下方并且不显示灰色？我也不知道如何让灰色元素在有人点击它时不隐藏。

  $(".d").click(function(){
        $(".d ul li").slideToggle(200);
    });

$(".a").click(function(){
        $(".b").slideToggle(200);
    });

#container
{
    width: 200px;
    height: 500px;
    background-color: rgba(0, 0, 0, 0.3);
    overflow-y: scroll;
    overflow-x: hidden;
}

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

.a, .c
{
    position: relative;
    display: none;
    width: 200px;
    height: 100px;
    margin-bottom: 10px;
    background-color: black;
    cursor: pointer;
}

.b
{
    position: relative;
    display: none;
    margin-bottom: 5px;
    padding: 0;
    height: 100px;
    width: 200px;
    background-color: rgba(0, 0, 0, 0.6);
}

.d, .e
{
    font-size: 20px;
    position: relative;
    width: 200px;
    height: 100px;
    margin-bottom: 10px;
    background-color: orange;
    cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<div id="container">
    <ul>
        <li class="d">1
            <ul>
                <li class="a"></li>
                    <ul>
                        <li class="b"></li>
                        <li class="b"></li>
                        <li class="b"></li>
                    </ul>
                <li class="c"></li>
                <li class="c"></li>
            </ul>
        </li>
        <li class="d">2</li>
    </ul>
</div>

Answer 1

页面快结束了，不能向下滚动，所以要添加element，也可以在element内使用href="#id/.classname"隐藏然后查看页面这可以完成 $(文档).ready(函数(){ $(".a").隐藏(); $(".b").隐藏(); $(".d").点击(函数(){ $(".d").fadeIn('快'); });

$(".a").click(function(){
        $(".b").fadeIn('fast');
    });