jQuery - 单击后显示一个 div 并关闭另一个

Question

我正在构建我的个人网站，但遇到了一个挑战。我想这对那些比我更熟悉 jQuery 的人来说是没有的(不难);)

结构:

<a href>one</a>
<div id="hidden_one></div>

<a href>two</a>
<div id="hidden_two></div>

<a href>three</a>
<div id="hidden_three></div>

<a href>four</a>
<div id="hidden_four></div>

等 换句话说，每个“a”始终显示，并在下方附加一个 div。

Action :

点击任意“a”后:

如果单击“a”在下方显示一个 div - 关闭该 div

如果单击“a”在下方没有显示 div，但显示了其他 div - 隐藏这些 div 并显示附加到此“a”的那个。

如果没有显示 div - 显示附加到这个“a”的那个。

我将不胜感激任何支持! :)

Answer 1

试试这个

$('a').on('click',function(e) {
    e.preventDefault();
    $(this).next('div').slideToggle().siblings('div').hide();
});

DEMO