jquery控制div的滑動隱藏和顯示
阿新 • • 發佈：2019-02-19
<html> <script type="text/javascript" src = "js/jquery.js"></script> <script type="text/javascript" src = "js/aa.js"></script> <script type="text/javascript" src = "js/bb.js"></script> <head></head> <body> <?php for($i=0;$i<3;$i++){ ?> <input onclick = "blockoff(this)" class = "aa on" type = "button" value = "click0<?php echo $i; ?>"><br/> <div class = "cc" style = "display:none;">123</div><br/> <?php } ?> </body> </html>
aa.js
$(document).ready(function(){ $(".aa").each(function(i){ if($(this).hasClass("off")){ $(this).removeClass("off").addClass("on"); $(".cc").slideDown("normal"); } else if($(this).hasClass("on")){ $(this).removeClass("on").addClass("off"); $(".cc").slideUp("normal"); } }); $(".aa").unbind('click'); $(".aa").live('click',function(){ var i = $(".aa").index(this);///點選的索引 if(jQuery(this).hasClass("off")){ $(".aa").eq(i).removeClass("off").addClass("on"); $(".cc").eq(i).slideDown("normal"); } else if(jQuery(this).hasClass("on")){ $(".aa").eq(i).removeClass("on").addClass("off"); $(".cc").eq(i).slideUp("normal"); } }); });
bb.js
function blockoff(obj){
$(".aa").each(function(i){
if(obj!=this && $(this).hasClass("on")){
$(this).trigger("click");
}
})
};jquery.js是js庫