html - 如何在单击时更改无序列表宽度

Question

我正在建立响应式网站。我有固定的导航。我的内容正在改变。我想将 HOME 列表更改为单击它时的宽度为 180 像素。有人可以帮忙吗？

这是我的导航代码

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

您是说您希望单个<li>元素在单击时更改其宽度吗？

如果您使用的是 Jquery，您可以这样做：

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

Answer 2

您可以通过在点击事件上添加一个带有 javascript 的类来实现。