jquery - 为什么在使用 jQuery 为其父元素设置动画时，子绝对定位元素会被切断？

Question

我有一个侧边栏导航，单击它的子箭头图标元素会折叠和展开。侧边栏导航折叠为图标（我没有为这个问题添加图标）并展开以显示导航文本。

除了一个问题外，该功能运行良好。当单击箭头图标（白色圆圈）以显示/隐藏中殿时，它会切断并恢复其原始形状，直到导航达到其最终宽度。我尝试了各种解决方案，但都没有奏效。但是，如果我删除#header_arrow 的绝对位置，那么这个切断问题就会解决，但我必须需要这个 css 才能将图标放在正确的位置。

请参阅下面的代码/演示并帮助我修复它。

    $(document).ready(function(){
		// arrow button to collapse side nav
		$('#header_arrow').click(function(){
			if($('#header_nav').hasClass('header_showing')) { // if nav is showing links
				$('.header_nav_text').hide();
				$('#header_nav').animate({width:'50px'},1200);
				$('#cont').animate({'margin-left':'50px'},1200);
				$('#header_nav').removeClass('header_showing').addClass('header_hidden');
			} else if($('#header_nav').hasClass('header_hidden')) { // if nav has hidden links
				$('.header_nav_text').show();
				$('#header_nav').animate({width:'200px'},1200);
				$('#cont').animate({'margin-left':'200px'},1200);
				$('#header_nav').removeClass('header_hidden').addClass('header_showing');
			}
		});
    });

	/* nav */
	.header_showing {width:200px;}
	.header_hidden {width:50px;}
	.header_hidden .header_nav_text {display:none;}
	.header_showing #header_nav_notifications_no {margin-left:4px;}
	.header_hidden #header_nav_notifications_no {margin-left:-10px;}
	#header_nav {background:#2c3b4d; box-shadow:0px 0px 5px #2c3b4d; color:#fff; height:40px; left:0; position:fixed; top:0; height:100%; padding-top:20px; z-index:10;}
	#header_arrow {background:url(../images/header-arrow.png) no-repeat center center #fff; background-size:5px 10px; border:1px solid #2c3b4d; border-radius:50%; box-shadow:0px 0px 5px #2c3b4d; color:#2c3b4d; cursor:pointer; height:26px; line-height:26px; position:absolute; right:-13px; text-align:center; top:20px; width:26px; z-index:11;}
	#header_nav li {}
	#header_nav li a {background-size:15px 15px; background-position:left center; display:block; height:40px; line-height:40px; margin-left:15px; padding:0 0 0 25px;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<ul id="header_nav" class="header_showing">
        <div id="header_arrow" class="header_nav_hide">&nbsp;</div>
        <li><a id="header_prospects" class="anim_btn" href="#"><span class="header_nav_text">Prospects</span></a></li>
        <li><a id="header_customers" class="anim_btn" href="#"><span class="header_nav_text">Customers</span></a></li>
        <li><a id="header_notifications" class="anim_btn" href="#"><span class="header_nav_text">Notifications</span><span id="header_nav_notifications_no">0</span></a></li>
        <li><a id="header_tasks" class="anim_btn" href="#"><span class="header_nav_text">Tasks</span></a></li>
        <li><a id="header_reports" class="anim_btn" href="#"><span class="header_nav_text">Reports</span></a></li>
        <li id="header_logout_cont"><a id="header_logout" class="anim_btn" href="#"><span class="header_nav_text">Log Out</span></a></li>
        <li id="header_settings_cont"><a id="header_settings" class="anim_btn" href="#"><span class="header_nav_text">Settings</span></a></li>
        <div class="clr"></div>
    </ul>

标签： jquery

Answer 1

一个快速的解决方法是overflow: visible !important;在你的 header_nav中设置

#header_nav {
background:#2c3b4d; 
overflow: visible !important; 
box-shadow:0px 0px 5px #2c3b4d; 
color:#fff; 
height:40px; 
left:0; 
position:fixed; 
top:0; 
height:100%; 
padding-top:20px; 
z-index:10;
}

编辑

$(document).ready(function(){
		// arrow button to collapse side nav
		$('#header_arrow').click(function(){
			if($('#header_nav').hasClass('header_showing')) { // if nav is showing links
				$('.header_nav_text').hide();
				$('#header_nav').animate({width:'50px'},1200).css('overflow','visible');
				$('#cont').animate({'margin-left':'50px'},1200);
				$('#header_nav').removeClass('header_showing').addClass('header_hidden');
			} else if($('#header_nav').hasClass('header_hidden')) { // if nav has hidden links
				$('.header_nav_text').show();
				$('#header_nav').animate({width:'200px'},1200).css('overflow','visible');
				$('#cont').animate({'margin-left':'200px'},1200);
        
				$('#header_nav').removeClass('header_hidden').addClass('header_showing');
			}
		});
    });

/* nav */
	.header_showing {width:200px;}
	.header_hidden {width:50px;}
	.header_hidden .header_nav_text {display:none;}
	.header_showing #header_nav_notifications_no {margin-left:4px;}
	.header_hidden #header_nav_notifications_no {margin-left:-10px;}
	#header_nav {background:#2c3b4d; box-shadow:0px 0px 5px #2c3b4d; color:#fff; height:40px; left:0; position:fixed; top:0; height:100%; padding-top:20px; z-index:10;}
	#header_arrow {background:url(../images/header-arrow.png) no-repeat center center #fff; background-size:5px 10px; border:1px solid #2c3b4d; border-radius:50%; box-shadow:0px 0px 5px #2c3b4d; color:#2c3b4d; cursor:pointer; height:26px; line-height:26px; position:absolute; right:-13px; text-align:center; top:20px; width:26px; z-index:11;}
	#header_nav li {}
	#header_nav li a {background-size:15px 15px; background-position:left center; display:block; height:40px; line-height:40px; margin-left:15px; padding:0 0 0 25px;}
.small-container{ overflow:hidden;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<ul id="header_nav" class="header_showing">
        <div id="header_arrow" class="header_nav_hide">&nbsp;</div>
        <div class="small-container">
        <li><a id="header_prospects" class="anim_btn" href="#"><span class="header_nav_text">Prospects</span></a></li>
        <li><a id="header_customers" class="anim_btn" href="#"><span class="header_nav_text">Customers</span></a></li>
        <li><a id="header_notifications" class="anim_btn" href="#"><span class="header_nav_text">Notifications</span><span id="header_nav_notifications_no">0</span></a></li>
        <li><a id="header_tasks" class="anim_btn" href="#"><span class="header_nav_text">Tasks</span></a></li>
        <li><a id="header_reports" class="anim_btn" href="#"><span class="header_nav_text">Reports</span></a></li>
        <li id="header_logout_cont"><a id="header_logout" class="anim_btn" href="#"><span class="header_nav_text">Log Out</span></a></li>
        <li id="header_settings_cont"><a id="header_settings" class="anim_btn" href="#"><span class="header_nav_text">Settings</span></a></li>
        </div>
        <div class="clr"></div>
    </ul>

你是对的，这是一个肮脏的解决方案。

我想出了一个解决方法!important

$('#header_nav').animate({width:'50px'},1200).css('overflow','visible');

对于扩展问题，我使用了一个 helper-container <div class="small-container">，它有overflow:hidden，所以单词不能爆发