Question

点击#b1时如何显示#a1，点击#b2时显示#a2？我也需要它们关闭（如果你点击它会显示，如果你再次点击它将关闭）。如果你可以更好地添加转换。

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

Answer 1

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

Example Here

$('#a1').on('click', function () {
    $('#b1').fadeToggle();
});
$('#a2').on('click', function () {
    $('#b2').fadeToggle();
});

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

Example Here

var mapping = {
    'a1': 'b1',
    'a2': 'b2'
}
$('.head_dd [id]').on('click', function () {
    $('#' + mapping[this.id]).fadeToggle();
});

没有jQuery：

您还可以使用纯JavaScript和CSS3过渡：

var mapping = {
    'a1': 'b1',
    'a2': 'b2'
}
Array.prototype.forEach.call(document.querySelectorAll('.head_dd [id]'), function (el) {
    el.addEventListener('click', function () {
      document.getElementById(mapping[this.id]).classList.toggle('visible');
    });
});

.bt1int {
    opacity: 0;
    transition: opacity 1s;
}
.visible {
    opacity: 1;
}

<div class="wrap">
    <ul class="head_dd">
        <li id="a1">a1</li>
        <li id="a2">a2</li>
    </ul>
</div>
<div class="bt1int" id="b1">b1</div>
<div class="bt1int" id="b2">b2</div>

Answer 2

试试这个。

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>

JS代码（将其置于头部或身体底部）

<script>
$(function(){

  $('#a1').on('click',function(){
    $('#b2').hide();
    $('#b1').show();
  });
  $('#a2').on('click',function(){
    $('#b1').hide();
    $('#b2').show();
  });
});
</script>

Answer 3

将事件侦听器附加到元素。

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);
});

Answer 4

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

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

然后添加以下js

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

显示DIV onclick并隐藏onclick with transition

4 个答案:

没有jQuery：