javascript - 下拉菜单一次打开一次

Question

我有一个ul li包含子菜单的列表。默认情况下，子菜单是隐藏的。当我点击第一个li a时，这个子菜单会向下滑动。当我点击第二个“li a”时，第二个子菜单会向下滑动。

一个问题是当我点击第二个li a时，第一个子菜单会向上滑动。这意味着一次只能打开一个子菜单。

请帮我一把。

jsFiddle

$(document).ready(function () {
    $('li a').on('click', function(){
        $(this).siblings().slideToggle();
    });
});

li {padding:20px; border: solid 1px;margin:5px;}

.square {
  display: none;
  border: 1px solid red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
    <li>
        <a>Hover List1</a>
        <div class="square">
        Square 1
        </div>
    </li>
    <li>
        <a>Hover List2</a>
        <div class="square">
        Square 2
        </div>
    </li>
    <li>
        <a>Hover List3</a>
        <div class="square">
        Square 3
        </div>
    </li>
    <li>
        <a>Hover List4</a>
        <div class="square">
        Square 4
        </div>
    </li>
</ul>

标签： javascriptjqueryhtmlcss

Answer 1

$(document).ready(function () {
    $('li a').on('click', function(){
            $('.square').removeClass('active');
        $(this).siblings().addClass('active');
    });
});

li {padding:20px; border: solid 1px;margin:5px;}

.square {
  display: none;
  border: 1px solid red;
}
.active {
  display: block;
  border: 1px solid red;
}