单击其中一个 li 时，如何减小 li 宽度？

Question

单击联系人时，我想减小"主页"one_answers"关于<li>"的宽度。是否可以将webkit用于此或仅使用普通的java onclick和onfocus事件？我正在努力理解CSS和HTML中的is then else（如果有的话）。

<ul>
    <li>Home</li>
    <li>About</li>
    <li>Contact</li>
</ul>

Answer 1

有很多方法可以解决这个问题，这取决于你需要支持什么浏览器，以及你是否想使用JavaScript框架来消除一些痛苦，尽管通过包含所述框架会增加页面的权重。

这里有一个非框架解决方案（demo1），它使用element.addEventListener在IE9、Firefox和Chrome/Safari中工作。对于<IE9支持您需要使用略有不同的事件绑定代码-请参阅上一句中的API链接。

HTML

<ul>
    <li>Home</li>
    <li>About</li>
    <li>Contact</li>
</ul>​

CSS

li {
    width:100px;
    background-color:lightSkyBlue;
}
li.narrow {
    width:50px;
}

JavaScript

// resize the list items apart from the one that is clicked
function resizeNotMe() {
    var listItems = document.getElementsByTagName('li');
    for (var i = 0; i < listItems.length; i++) {
        if (listItems[i] !== this) {
            listItems[i].className = 'narrow';
        } else {
            listItems[i].className = '';
        }
    }
}
// create click events on the list items
function load() {
    var listItems = document.getElementsByTagName('li');
    for (var i = 0; i < listItems.length; i++) {
        listItems[i].addEventListener('click', resizeNotMe, false);
    }
}
// run load function when page is loaded
document.addEventListener('DOMContentLoaded', load, false);

或者，您可以使用更严格绑定的element.onclick方法，该方法将在更多（旧版本的IE）浏览器上运行，但实际上不再是推荐的方法，因为行为（JavaScript事件）很混乱，或者没有与内容分离（HTML）。关注点的分离是web应用程序应该努力实现的。

演示2

HTML

<ul>
    <li onclick="resizeNotMe(this)">Home</li>
    <li onclick="resizeNotMe(this)">About</li>
    <li onclick="resizeNotMe(this)">Contact</li>
</ul>​

CSS

与第一种溶液相同

JavaScript

function resizeNotMe(me) {
    var listItems = document.getElementsByTagName('li');
    for (var i = 0; i < listItems.length; i++) {
        if (listItems[i] !== me) {
            listItems[i].className = 'narrow';
        } else {
            listItems[i].className = '';
        }
    }
}

或者选择JavaScript框架（例如jQuery），该框架允许分离关注点，并为DOM和CSS操作提供丰富的API等。

演示3（我的首选）

HTML

与第一种溶液相同

CSS

与第一种溶液相同

JavaScript

$('li').on('click', function() {
    $(this).removeClass('narrow').siblings().addClass('narrow');
});

这个演示的不同之处在于包含了jQuery库，因此您需要在代码中添加<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>之类的内容，或者下载jQuery并自己托管它。