サイトを作成しましたが、IE7 に何か問題があり、ナビゲーションがあり、li 要素をクリックすると、すべての li のスライドアップと一致する div がスライドダウンします。
これは、IE7 を除くすべてのブラウザーで機能します。
これを修正するために私が何をする必要があるか知っている人はいますか? min-width: 0 が機能しないため、 position: relative を使用する必要があります
スライドアップは機能しますが、スライドダウンは機能しません。
これは私が持っているものです...
var $j = jQuery.noConflict();
$j(function() {
$j('ul#menus li a').click(
function() {
$j('#menu-container .post').slideUp();
$j('#menu-container #post-' + $j(this).attr('class')).slideDown();
});
});
/* Menu */
#menu-container {
display: table;
margin: 0px auto;
padding-top: 50px;
width: 500px;
text-align: center;
}
#menu-container .post {
display: none;
margin: 25px auto 50px;
width: 575px;
min-width: 0;
}
#menu-container .first_item {
display: block;
}
#menu-container h2 {
margin-bottom: 20px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="menus">
<li class="post-1 post type-post hentry category-menus" id="post-1">
<h2><a href="#" rel="bookmark" title="Permanent Link to menu01" class="1">menu01</a></h2>
</li>
<li class="post-11 post type-post hentry category-menus" id="post-11">
<h2><a href="#" rel="bookmark" title="Permanent Link to menu02" class="11">menu02</a></h2>
</li>
<li class="post-59 post type-post hentry category-menus" id="post-59">
<h2><a href="#" rel="bookmark" title="Permanent Link to menu03" class="59">menu03</a></h2>
</li>
</ul>
<div id="menu-container">
<div class="post-1 post type-post hentry category-menus first_item" id="post-1">
Content
</div>
<div class="post-11 post type-post hentry category-menus" id="post-11">
Content
</div>
<div class="post-59 post type-post hentry category-menus" id="post-59">
Content
</div>
</div>
<!-- end #menu-container-->