Javascript 显示DIV onclick和隐藏带有转换的onclick

单击

#a1

时如何显示

#b1

，单击

#a2

时如何显示

#b2

？我需要他们也关闭（如果你点击，它将显示，如果你再次点击它将关闭）。如果你能添加更好的过渡

<div class="wrap">
    <ul class="head_dd">
        <li id="a1">INTERIOR</li>
        <li id="a2">EXTERIOR</li>
    </ul>
</div>

<div class="bt1int" id="b1" style="display: none;"></div>
<div class="bt1int" id="b2" style="display: none;"></div>

内饰
外部

最简单的方法是将事件侦听器附加到每个元素，然后使用显示/隐藏相应的元素

由于这可能会变得相对冗余，您可以将其简化为以下内容：

没有jQuery： 您还可以使用普通JavaScript和CSS3转换：

var映射={
‘a1’：‘b1’，
“a2”：“b2”
}
Array.prototype.forEach.call（document.queryselectoral（'.head\u dd[id]），函数（el）{
el.addEventListener（'click'，函数（）{
document.getElementById（映射[this.id]）.classList.toggle（'visible'）；
});
});
.bt1int{
不透明度：0；
过渡：不透明度1s；
}
.可见{
不透明度：1；
}


a1
a2

b1
b2
试试这个

HTML代码应该将数据放在div内容上，以区别它们

<div class="wrap">
             <ul class="head_dd">
                <li id="a1">INTERIOR</li>
                <li id="a2">EXTERIOR</li>
            </ul>
 </div>

 <div class="bt1int" id="b1" style="display: none;">a</div>
 <div class="bt1int" id="b2" style="display: none;">b</div>



内饰
外部

A.
B

JS代码（放在头部或身体底部）


$（函数（）{
$（'#a1'）。在（'click'，function（）上{
$（'#b2'）.hide（）；
$（'#b1'）.show（）；
});
$（'#a2'）。在（'单击'，函数（）上）{
$（'#b1'）.hide（）；
$（'#b2'）.show（）；
});
});
将事件侦听器附加到元素

var a1 = $('#a1');
var a2 = $('#a2');
var b1 = $('#b1');
var b2 = $('#b2');

a1.addEventListener('click', function(){
  b1.slideToggle(600);
});

a2.addEventListener('click', function(){
  b2.slideToggle(600);
});

还是替补

$('#a1').on( 'click', function(){
  $('#b1').slideToggle(600);
});

$('#a2').on( 'click', function(){
  $('#b2').slideToggle(600);
});

将每个li的name属性添加为目标div id

    <ul class="head_dd">
        <li id="a1" name="b1" >INTERIOR</li>
        <li id="a2" name="b2" >EXTERIOR</li>
    </ul>

使用jQuery这是非常初级的东西。你试过什么？再加上你的努力和回答。。。我有了答案！英雄联盟
var a1 = $('#a1');
var a2 = $('#a2');
var b1 = $('#b1');
var b2 = $('#b2');

a1.addEventListener('click', function(){
  b1.slideToggle(600);
});

a2.addEventListener('click', function(){
  b2.slideToggle(600);
});

$('#a1').on( 'click', function(){
  $('#b1').slideToggle(600);
});

$('#a2').on( 'click', function(){
  $('#b2').slideToggle(600);
});

    <ul class="head_dd">
        <li id="a1" name="b1" >INTERIOR</li>
        <li id="a2" name="b2" >EXTERIOR</li>
    </ul>

$(".head_dd li").click(function(e){
    var targetId = $(this).attr("name");
    if($("#"+targetId).is(':visible')){
        $("#"+targetId).hide(); 
    }else{
        $("#"+targetId).show();
    }
});