Javascript 使用js和css隐藏/显示div中的内容

我想通过单击图像的另一个div来显示div中的内容。我有一个基本的想法，但是当我把内容放到div中时，当div关闭时，它不会被隐藏

我把一个

放进去，即使div是隐藏的，

也总是显示出来

$（文档）.ready（函数（）{
$（'#标题'）。单击（函数（）{
$（“#content”）.removeClass（'hidden'）；
$（'内容'）.addClass（'可见'）；
});
$（'#content'）。在（'mouseleave'，函数（e）上{
setTimeout（函数（）{
$（'#content'）.removeClass（'visible'）.addClass（'hidden'）；
}, 600);
});
});
。隐藏{
最大高度：0px；
}
.可见{
最大高度：500px；
}
#内容{
宽度：200px；
高度：200px；
背景：水鸭；
-webkit过渡：最大高度0.8s；
-moz过渡：最大高度0.8s；
过渡：最大高度0.8s；
}
#标题{
宽度：10px；
高度：10px；
背景：黑暗；
利润率：10px；
}


一些文本
一些文本

这是因为您的
溢出了
高度。将
溢出：隐藏
添加到
#内容


$（文档）.ready（函数（）{
$（'#标题'）。单击（函数（）{
$（“#content”）.removeClass（'hidden'）；
$（'内容'）.addClass（'可见'）；
});
$（'#content'）。在（'mouseleave'，函数（e）上{
setTimeout（函数（）{
$（'#content'）.removeClass（'visible'）.addClass（'hidden'）；
}, 600);
});
});
。隐藏{
最大高度：0px；
}
.可见{
最大高度：500px；
}
#内容{
宽度：200px；
高度：200px；
背景：水鸭；
-webkit过渡：最大高度0.8s；
-moz过渡：最大高度0.8s；
过渡：最大高度0.8s；
溢出：隐藏；
}
#标题{
宽度：10px；
高度：10px；
背景：黑暗；
利润率：10px；
}


一些文本
一些文本

这是因为您的
溢出了
高度。将
溢出：隐藏
添加到
#内容


$（文档）.ready（函数（）{
$（'#标题'）。单击（函数（）{
$（“#content”）.removeClass（'hidden'）；
$（'内容'）.addClass（'可见'）；
});
$（'#content'）。在（'mouseleave'，函数（e）上{
setTimeout（函数（）{
$（'#content'）.removeClass（'visible'）.addClass（'hidden'）；
}, 600);
});
});
。隐藏{
最大高度：0px；
}
.可见{
最大高度：500px；
}
#内容{
宽度：200px；
高度：200px；
背景：水鸭；
-webkit过渡：最大高度0.8s；
-moz过渡：最大高度0.8s；
过渡：最大高度0.8s；
溢出：隐藏；
}
#标题{
宽度：10px；
高度：10px；
背景：黑暗；
利润率：10px；
}


一些文本
一些文本

也许可以试试jquery

以下是JSFIDLE中的jquery方法。但过一会儿我会发布一个javascript解决方案


也许试试jquery

以下是JSFIDLE中的jquery方法。但过一会儿我会发布一个javascript解决方案


在#content div上添加隐藏类，并设置属性
overflow:hidden






一些文本
一些文本


在#content div上添加隐藏类，并设置属性
overflow:hidden






一些文本
一些文本

Add
overflow:hidden
到
hidden
类Add
overflow:hidden
到
hidden
类如果类除了隐藏和显示元素之外还有其他含义呢？是的，我认为这是非常基本的，我正在改进我的答案，因为我认为这还不足以回答这个问题。不过我正在研究：）这是正确的方法+1谢谢我在改进我的答案如果类除了隐藏和显示元素之外还有其他意义呢？是的，我认为这是非常基本的，我在改进我的答案，因为我认为这还不足以回答这个问题。不过我正在研究：）这是正确的方法+谢谢，我正在改进我的答案
$( "#Hideme" ).click(function() {
  $('#package').hide();
});

$( "#showme" ).click(function() {
  $('#package').show();
});

$(document).ready(function () {
$('#header').click(function () {
$('#content').removeClass('hidden');
$('#content').addClass('visible');
$('#Hej').show();
 });
  $('#content').on('mouseleave', function (e) {
  setTimeout(function () {
  $('#content').removeClass('visible').addClass('hidden');
    $('#Hej').hide();
  }, 600);
 });
});

    .hidden{
    max-height: 0px;
    }
     .visible{
    max-height: 500px;  
    }

    #content{
    width:200px;
    height:200px;
    background:teal;
    -webkit-transition: max-height 0.8s;
    -moz-transition: max-height 0.8s;
     transition: max-height 0.8s;
     overflow:hidden;

     }

     #header{
    width:10px;
    height:10px;
    background:darkred;
    margin:10px;
    }

$(document).ready(function() {
  $('#header').click(function() {

    $('#content').removeClass('hidden');
    $('#content').addClass('visible');
  });
  $('#content').on('mouseleave', function(e) {
    setTimeout(function() {
      $('#content').removeClass('visible').addClass('hidden');
    }, 600);
  });
});

 <div id="header">
    </div>
<div id="content" class="hidden">
  <ul>
    <li>some text</li>
    <li>some text</li>
  </ul>
</div>