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

Question

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

我放了一个<ul>在和<ul>即使在隐藏 div 时也始终显示。

$(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);
  });
});

.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;
}

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="header"></div>
<div id="content">
  <ul>
    <li>some text</li>
    <li>some text</li>
  </ul>
</div>

Answer 1

那是因为你的<ul>溢出<div>高度。添加overflow: hidden至 #content

$(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);
  });
});

.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;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="header"></div>
<div id="content">
  <ul>
    <li>some text</li>
    <li>some text</li>
  </ul>
</div>