一个子菜单一次打开一个并单击关闭

Question

我有一个子菜单列表。现在我可以一次打开一个：单击列表1将打开子菜单1.单击列表2，子菜单2将打开，子菜单1将自动关闭。

问题：我再次单击列表2，子菜单2应该基于slideToggle()关闭，但它在此之后关闭并打开。

请帮忙。

jsfiddle

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

    li {padding:20px; border: solid 1px;margin:5px;}
    
    .square {
      display: none;
      border: 1px solid red;
    }
    .active {
      display: block;
      border: 1px solid red;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
        <li>
            <a class="test">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>

Answer 1

你必须为slideUp()的div做parent().siblings()：

$(this).parent().siblings().find('.square').slideUp();

$(document).ready(function () {
    $('li a').on('click', function(){
   
         $(this).parent().siblings().find('.square').slideUp();

    		
        $(this).siblings().slideToggle();
    });
});

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

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
    <li>
        <a class="test">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>