一个子菜单一次打开一个子菜单，然后单击以关闭

Question

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

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

请帮助。

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()的{​​{1}}做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;
}