Question

我有多个按钮。每个都显示不同的div元素。

问题在于它还应该隐藏已经显示/显示的上一个div。不只是越来越多的div而不隐藏以前的div ...

显示和隐藏应该具有jQuery效果

JQUERY

$(document).on("click", ".obj_res_btn", function(e){
    
    $(".obj_res_box").addClass("hide_list_item");
    
    var boxID = $(this).data("boxid");
    
    $("#" + boxID).toggle('slow', function() {
            $("#" + boxID).toggleClass("hide_list_item", "show_list_item");
    });         

    
    e.preventDefault();
    
});

HTML

<a href="#" class="list-down-btn obj_res_btn" data-boxid="1">SHOW DIV</a>
<a href="#" class="list-down-btn obj_res_btn" data-boxid="2">SHOW DIV</a>
<a href="#" class="list-down-btn obj_res_btn" data-boxid="3">SHOW DIV</a>


<div id="1" class="obj_res_box hide_list_item">...</div>
<div id="2" class="obj_res_box hide_list_item">...</div>
<div id="3" class="obj_res_box hide_list_item">...</div>

CSS

.hide_list_item {display: none;}
.show_list_item {display: block;}

Answer 1

$(document).on("click", ".obj_res_btn", function(e) {
  //hide all shown and set class to hide_list_item
  $(".obj_res_box:visible").slideToggle(function(){$(this).addClass('hide_list_item').removeClass('show_list_item')});
  var boxID = $(this).data("boxid");
  //show if not shown already all shown and set class to hide_list_item
  $("#" + boxID).not(':visible').slideToggle("slow",function(){$(this).addClass('show_list_item').removeClass('hide_list_item')});
});

.obj_res_box {
  display: none
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a href="#" class="list-down-btn obj_res_btn" data-boxid="1">SHOW DIV 1</a>
<a href="#" class="list-down-btn obj_res_btn" data-boxid="2">SHOW DIV 2</a>
<a href="#" class="list-down-btn obj_res_btn" data-boxid="3">SHOW DIV 3</a>


<div id="1" class="obj_res_box hide_list_item">id1</div>
<div id="2" class="obj_res_box hide_list_item">id2</div>
<div id="3" class="obj_res_box hide_list_item">id3</div>

jQuery-显示和隐藏具有效果的元素

1 个答案: