Question

我有一个jsFiddle：

HTML：

<input type="button" id="shrink" value="<" />
<div id="skaLeftNav">
    <ul>
        <li class="skaButton cf" nowrap="nowrap">
            <div class="skaImgWrap">
                img
            </div>
            <div class="skaTextWrap">My&nbsp;Dashboard&nbsp;Link1</div>
        </li>
        <li class="skaButton cf" nowrap="nowrap">
            <div class="skaImgWrap">
                img
            </div>
            <div class="skaTextWrap">My&nbsp;Dashboard&nbsp;Link2</div>
        </li>
    </ul>
</div>

这就是js，非常简单：

$(document).ready(function(){
    $('#shrink').click(function(){
        setTimeout($('#skaLeftNav').animate({width:50},2000),2000);
        $('.skaTextWrap').fadeOut(2000);
    });
});

和我最不确定的部分，CSS：

#skaLeftNav{
    width:190px;
    overflow-x:hidden;
    }
#skaLeftNav ul{
    margin:0px;
    padding:0px;
    list-style:none;
    border:1px solid #aaa;
    border-left:none;
    }
.skaButton{
    overflow-x:hidden;
    height:70px;
    }
.skaImgWrap{
    display:inline-block;
    border:1px solid gray;
    width:32px;
    height:32px;
    }
.skaTextWrap{
    display:inline-block;
    margin-left:5px;
    border:1px solid #ddd;
    }

我遇到的唯一（也是显而易见的）问题是，当左侧导航变窄时，文本块会堆叠在图像块下面。顺便说一句，我为＆lt; li＆gt;指定了高度：75px。只有这样你才能看到发生了什么。

基本上我正在努力使用正确的显示类型和溢出类型（如果需要）。

Answer 1

很简单：

.skaButton {
    overflow-x:hidden;
    white-space: nowrap; /* <- add this */
}

演示 http://jsfiddle.net/nc5e2rtq/6/

Answer 2

我认为Arbel的答案是绝对正确的。仅用于文档，你也可以在动画中做这样的事情。

$(document).ready(function(){
    $('#shrink').click(function(){
        setTimeout($('#skaLeftNav').animate({width:50},2000),2000);
        $('.skaTextWrap').animate({width:-5, opacity: 0},2000);
    });
});

演示http://jsfiddle.net/ak5wvpfL/

将图标/文本折叠到左侧导航中的图标

2 个答案: