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>高さが溢れているからです。多分jqueryのを試してみてください#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

にoverflow: hidden追加しますか？

ここはJSFiddleのjqueryです。しかし、私は

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

が#content divの上の隠しクラスと設定プロパティを追加しますしばらくjavascriptの解決策を投稿します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; 
    } 

---

01クラスは唯一の隠れや要素を示す以外の意味を持っている場合はどうすれば `hidden`クラス