Question

我想创建平滑的下拉菜单。这个想法是：当点击橙色元素时，它将切换黑色元素，当点击黑色元素时，它将切换灰色元素。但我得到的是黑色元素覆盖橙色元素与灰色元素已经切换。我已经到处使用display:none;来确保它不会显示出来......点击橙色元素后，所有内容都会被切换。使用.hide()也不想隐藏这些元素。如何让这个黑盒子（在click事件之后）切换到橙色元素下方并且不显示灰色？此外，我不知道当有人点击它时如何使灰色元素不隐藏。

＆＃13;

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

＆＃13;

#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;
}

＆＃13;

<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>

＆＃13;

Answer 1

页面越过了，所以它不能向下滚动所以你应该添加元素，也可以在元素内使用href =“＃id / .classname” 隐藏然后寻找页面这可以做到 $（文件）。就绪（函数（）{ $（ “一”），隐藏（）。 $（ “B”）的hide（）。 $（ “d”）。点击（函数（）{ $（ “d”）淡入（ '快'）。 }）;

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

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

1 个答案: