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

Question

我想通过点击图片的另一个div来显示div中的内容。我有基本的想法工作，但当我把内容放入div时，它不会隐藏div关闭时。

我添加了<ul>，即使隐藏了div，<ul>也会显示。

$(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

这是因为您的byte[] jsonBytes = Encoding.UTF8.GetBytes(json); using (var stream = new MemoryStream(jsonBytes)) { output = Deserialize<List<T>>(stream); } public TResult Deserialize<TResult>(Stream responseStream) { using (var sr = new StreamReader(responseStream)) { using (var reader = new JsonTextReader(sr)) { var serializer = new JsonSerializer { MissingMemberHandling = EnforceMissingMemberHandling ? MissingMemberHandling.Error : MissingMemberHandling.Ignore, NullValueHandling = IgnoreNullValues ? NullValueHandling.Ignore : NullValueHandling.Include }; return serializer.Deserialize<TResult>(reader); } } } 高度溢出<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;
}

Answer 2

  

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

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

Answer 3

也许尝试jquery？

这是JSFiddle中的一种jquery方式。但我会在一段时间内发布一个javascript解决方案

https://jsfiddle.net/fyws9zye/13/

$( "#Hideme" ).click(function() {
  $('#package').hide();
});

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

Answer 4

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