如何在点击时更改无序列表宽度

Question

我正在构建响应式网站。我有固定的导航。我的内容正在改变。我想改变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%; 

} 

Answer 1

代码可以通过添加一个类上单击事件的JavaScript做到这一点。

Answer 2

你是说你想单个<li>元素单击时改变其宽度？

如果你使用jQuery，你可以这样做：

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