Inhalt in einem div mit js und css ausblenden/aufdecken

Question

Ich möchte Inhalte in einem div anzeigen, indem Sie auf ein anderes div eines Bildes klicken. Ich habe die Grundidee zu arbeiten, aber wenn ich Inhalt in das Div setzen, ist es nicht versteckt, wenn das Div geschlossen ist.

Ich habe eine <ul> in und die <ul> wird immer angezeigt, auch wenn das div versteckt ist.

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

Es ist, weil Ihre <ul><div> Höhe ist überfüllt. Hinzufügen overflow: hidden zu #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>

Answer 2

Vielleicht jquery versuchen?

Hier ist ein JQuery Weg in JSFiddle. Aber ich werde eine Javascript-Lösung in eine Weile Post

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

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

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

Answer 3

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

Answer 4

versteckte Klasse hinzufügen auf #content div und setzen Eigenschaft 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>