倒塌圖標/文本只在左側導航欄中

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; 
    }

我遇到的唯一（也是顯而易見的）問題是當左側導航欄變窄時，圖像塊下面的文本塊堆棧。順便說一句，我指定的高度：75px的< li只>只有這樣你才能看到發生了什麼。

基本上我正在努力與正確的顯示類型和溢出類型（如有必要）。

來源

2014-09-29 Samuel Fullman

很簡單：

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

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

來源

2014-09-29 23:02:02 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/

來源

2014-09-29 23:12:06

倒塌圖標/文本只在左側導航欄中

回答

相關問題