Question

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

<!-- 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选择器在ID之前需要#，例如$("#AA1")。

＆＃13;

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

＆＃13;

.collapse{display:none}

＆＃13;

<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>

＆＃13;

Answer 2

如果没有内联JS，您可以轻松完成。只需使用数字向link元素添加ID或类。检查小提琴。

小提琴：https://jsfiddle.net/cshanno/kpot8j5x/2/

JS

$('a').click(function(){
    var link = $(this);
    var num = link.attr('id');
    $('#AA'+num+', #BB'+num).toggle();
});

HTML

<a href="#" id='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="#" id='2'>test2</a><br/>
<div class="collapse" id="AA2">
    AA 2 display
</div>    
<div class="collapse" id="BB2">
    BB 2 display
</div>

切换特定超链接点击对象的可见性

2 个答案: