javascript - 单击特定超链接时切换对象的可见性

Question

我不知道这个问题是否已经得到答案，但我在点击特定超链接后切换 div 的可见性时遇到问题。

我的代码(live example here) :

<!-- Link 1 -->
<a href="javascript:showSub(1)">test1</a>
<div class="collapse" id="AA1">
    AA 1 display
</div>    
<div class="collapse" id="BB1">
    BB 1 display
</div>    

<!-- Link 2 -->
<a href="javascript:showSub(2)">test2</a>
<div class="collapse" id="AA2">
    AA 2 display
</div>    
<div class="collapse" id="BB2">
    BB 2 display
</div>   

我想要的是，每当我按下按钮 test1 时，它都会显示包含 id="AA1" 和 id="BB1" 的所有 div。如果我按另一个按钮或相同的按钮，它应该被关闭。像这样的东西:

function showSub(id){    
    $("AA"+id).toggle();    
    $("BB"+id).toggle();
}

我怎样才能做到这一点？

请记住，由于 showSub(x) 函数中的值动态设置，我需要此内联 javascript 调用。

Answer 1

ID 选择器在 ID 之前需要 #，例如 $("#AA1")。

function showSub(id){    
    $("#AA"+id).toggle();    
    $("#BB"+id).toggle();
}

.collapse{display:none}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<!-- Link 1 -->
<a href="javascript:showSub(1)">test1</a><br/>
<div class="collapse" id="AA1">
    AA 1 display
</div>    
<div class="collapse" id="BB1">
    BB 1 display
</div>    

<!-- Link 2 -->
<a href="javascript:showSub(2)">test2</a>
<div class="collapse" id="AA2">
    AA 2 display
</div>    
<div class="collapse" id="BB2">
    BB 2 display
</div>