滑动解决方案jquery和css

sliding solution jquery and css

本文关键字：css jquery 解决方案      更新时间：2023-09-26

当我第一次点击flip时，它显示面板，然后我点击面板，它将显示子面板。

但当我在flip上点击多次，然后在面板上点击一次时，它会错误地工作，因为子面板会显示并隐藏多次点击。

怎么了？

我的代码：

<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script> 
$(document).ready(function(){
  $("#flip").click(function(){
    $('#panel').slideToggle("slow",function(){
        $('#panel').click(function(){
        $('#subpanel').slideToggle("slow");
        });
    });
  });
});
</script>
<style> 
#panel,#flip,#subpanel
{
padding:5px;
text-align:center;
background-color:#e5eecc;
border:solid 1px #c3c3c3;
}
#panel,#subpanel
{
padding:50px;
display:none;
}
</style>
<style>
</style>
</head>
<body>

<div id="flip">Click to slide the panel down or up</div>
<div id="panel">Hello world!</div>
<div id="subpanel" style="display:none;">hello </div>

</body>
</html>

尝试将#click上的面板移出#flip的click处理程序。每次单击flip时，您都在为面板准备单击处理程序。

相关文章：