怎么用js或jq点击展开,出现隐藏的DIV,点击收起DIV又隐藏起来.

如题所述

<script src="jquery-1.8.2.js"></script>
<script>
/*展开和收起用一个div,也可以说它是个按钮,假设它的id=d1;
假设需要显示和隐藏的div叫d2;
下面这段代码只是粗略的实现了你的要求,主要是给你提供个思路;
*/
$(function(){
$('#d1').click(function(){//给d1绑定一个点击事件;
           
        /*这个判断的意义是,如果d2是隐藏的,那么让它显示出来,并将d1的文本内容替换成收起,
        如果是显示的,那么就隐藏它并将d1的文本内容替换为展开;*/
        if($('#d2').is(':hidden'))
        {
          $('#d2').slideDown('slow');  
          $(this).text('收起');
        }else{
          $('#d2').slideUp('slow');
          $(this).text('展开');  
            }
               
    /*这是一个很简单的事件处理,如果还需要跟上图片的变换,就在判断的对应位置写入图片或者背景变换的代码,*/
});
});
</script>
<div id='d1'>展开</div>
<div id='d2' style=" display:none">内容</div>

温馨提示:答案为网友推荐,仅供参考
第1个回答  推荐于2018-07-08
[ h1 ^]
| |
| div1 |
| |

如图所示:h1是你说贴出的两个图(展开、收起)
div1是你要展开后弹出的层

$("#h1").click(function () {
$("#div1").toggle("slow",function () {
if ($(this).attr("style").toLowerCase().indexOf("none") == -1) {
$("#imgBasicInfo").attr("src", "../../Images/BarUp.gif");
}
else {
$("#imgBasicInfo").attr("src", "../../Images/BarOpen.gif");
}
});
});
imgBasicInfo为你要显示的展开、收起的图片动态本回答被网友采纳
第2个回答  推荐于2018-02-26

自己修改 jQuery 路径


<script type="text/javascript" src="jquery-1.9.1.min.js"></script>
<script type="text/javascript">
$(function() {
    $("#toggle").click(function() {
        $(this).text($("#content").is(":hidden") ? "收起" : "展开");
        $("#content").slideToggle();
    });
});
</script>


<a href="#" id="toggle">展开</a>
<div id="content" style="display: none;"><p>隐藏内容<p><p>隐藏内容<p></div>

本回答被提问者和网友采纳
第3个回答  2013-05-09
<script language="javascript">
function showmenu(x)
{
var i,divx;
for(i=1;i<=3;i++)
{
divx=eval("m"+i);
divx.style.visibility="hidden";
}
divx=eval("m"+x);
divx.style.visibility="visible";
}

</script>