如何在點擊時更改無序列表寬度

我正在構建響應式網站。我有固定的導航。我的內容正在改變。我想改變HOME列表，例如，當我點擊它時，寬度爲180px。有人可以幫忙嗎？如何在點擊時更改無序列表寬度

這是我的導航

HTML

<div class="aside"> 
<ul> 
    <li><a class="po" href="index.html">HOME</a></li> 
    <li><a class="fo" href="galerija.html">GALERY</a></li> 
    <li><a class="ra" href="program.html">PROGRAM</a></li> 
    <li><a class="ko" href="ulaznice.html">TICKETS</a></li> 
<li><a class="ko" href="kontakt.html">CONTACT</a></li> 
</ul>

CSS

.aside ul 
{ 
float:left; 
font-size:0.8em; 
display:block; 
margin-top:10%; 
padding: 0px; 
max-width:180px: 
width:100%; 
min-width:140px; 

} 


.aside li 
{ 
height:40px;  
list-style:none; 
width:100%; 
display:block; 
text-align:center; 
line-height:45px; 
padding-top:2px; 

} 


.aside a 
{ 
background-color:white; 
display:block; 
height:40px; 
width:70%; 
text-align: center; 
text-decoration:none; 
font-size:1.375em; 
font-weight:600; 
font-weight:600; 
color:#4ea3d9; 
-moz-transition: all 600ms ease; 
-webkit-transition:all 600ms ease; 
-o-transition: all 600ms ease; 

} 

.aside a:hover 
{ 
width:100%; 

}

來源

2013-02-12 Sinisa O' neill

代碼可以通過添加一個類上單擊事件的JavaScript做到這一點。

來源

2013-02-12 22:47:35 Vanja

位的代碼可能會幫助他們...... – 2013-02-12 23:06:29

你是說你想單個<li>元素單擊時改變其寬度？

如果你使用jQuery，你可以這樣做：

$('.aside ul li').click(function() { 
    $(this).css('width', 180); 
});

來源

2013-02-12 22:52:00 rosalindwills

http://prntscr.com/sj5gi這是懸停截圖。謝謝，但你的方法沒有工作..它改變寬度，但1秒後舊寬度回來。 – 2013-02-12 23:29:59

如何在點擊時更改無序列表寬度

回答

相關問題