使用javascript更改点击的li宽度

Question

我有一个像画廊这样的物品，我所有的li都坐在30％的宽度上浮动，无论如何，我想做的是，如果我单击一个特定的li，我只希望那个li变为100％的宽度，其他的都会掉下来在它下面但不单击X会将其带回到30％的宽度，因此单击另一个LI并最终将所有其他LI切换为30％且选择的Li i为100％宽度。

我要完成的是让所选的li仅显示30％的全幅和全幅图像，以占据画廊的全幅并显示诸如项目信息之类的隐藏内容。 因此：

将图像宽度设置为固定宽度，并在其旁边显示内容，将li宽度扩展到框的100％。 然后使用X或另一个Li关闭图像时反转操作（IF函数）

这是一个太多的代码片段，无法在此处显示

 #gallery{ background-color:#0f0; display:block; width:80%; height:80%; min-width:180px; border:#060 solid 1px; text-align:center; position:fixed; position:absolute\\9; margin-top:5%\\9; top:expression(eval(document.body.scrollTop))\\9; top:10%; left:10%; /* Box shadow */ filter: progid:DXImageTransform.Microsoft.Shadow(color='#006600', Direction=112.7, Strength=5); -webkit-box-shadow:1px 3px 15px #060; -moz-box-shadow:1px 3px 15px #060; box-shadow:1px 3px 15px #060; } #gallery h1{ background-color:#060; width:95%; min-width:150px; padding:10px; font-size:20px; color:#0f0; border-top:#060 solid 1px; border-bottom:#060 solid 1px; margin:5% 0px 3% 0px; /* Box shadow */ filter: progid:DXImageTransform.Microsoft.Shadow(color='#111111', Direction=112.7, Strength=5); -webkit-box-shadow:-1px 0px 15px #111; -moz-box-shadow:-1px 0px 15px #111; box-shadow:-1px 0px 15px #111; } #gallery ul{ background-color:#080; width:100%; height:80%; padding:10px 0px; margin-bottom:10px; border-top:#040 solid 1px; border-bottom:#040 solid 1px; display:block; overflow:scroll; overflow-x:hidden; } #gallery li{ width:30%; height:200px; border:#090 solid 1px; margin:10px 1.3%; float:left; display:inline-block; /* Box shadow */ -webkit-box-shadow:-1px 0px 15px #020; -moz-box-shadow:-1px 0px 15px #020; box-shadow:-1px 0px 15px #020; cursor:pointer; } 

 <div id="gallery"> <h1> Browse Our Gallery <a href="javascript:gallery()" style="font-size:29px;color:maroon;background-color:#050505;padding:5px 10px;float:right;margin-top:-10px;margin-right:-10px;"> X </a> </h1> <ul> <li name="item1"><a href="javascript:list(item1);"><img src="Front-card.png" alt="" width="100%" height="100%" /></a></li> <li name="item2"><a href="javascript:list(item2);"><img src="Front-card.png" alt="" width="100%" height="100%" /></a></li> <li name="item3"><a href="javascript:list(item3);"><img src="Front-card.png" alt="" width="100%" height="100%" /></a></li> <li name="item4"><a href="javascript:list(item4);"><img src="Front-card.png" alt="" width="100%" height="100%" /></a></li> <li name="item5"><a href="javascript:list(item5);"><img src="Front-card.png" alt="" width="100%" height="100%" /></a></li> <li name="item6"><a href="javascript:list(item6);"><img src="Front-card.png" alt="" width="100%" height="100%" /></a></li> <li name="item7"><a href="javascript:list(item7);"><img src="Front-card.png" alt="" width="100%" height="100%" /></a></li> <li name="item8"><a href="javascript:list(item8);"><img src="Front-card.png" alt="" width="100%" height="100%" /></a></li> <li name="item9"><a href="javascript:list(item9);"><img src="Front-card.png" alt="" width="100%" height="100%" /></a></li> <li name="item10"><a href="javascript:list(item10);"><img src="Front-card.png" alt="" width="100%" height="100%" /></a></li> <li name="item11"><a href="javascript:list(item11);"><img src="Front-card.png" alt="" width="100%" height="100%" /></a></li> <li name="item12"><a href="javascript:list(item12);"><img src="Front-card.png" alt="" width="100%" height="100%" /></a></li> </ul> </div> 

所以我想出的是使用带list（）的javascript onclick并执行诸如document.getElementBYtag或类似的对不起javascript的操作，而不仅仅是更改我选择的Li标签作为if if的一部分

function list(){
    var li = specific code to select only the li im selecting and not all LI;
    IF(Li.style.width === 30%){
        li style.width = "100%";
    }else{
        li.style.width = "30%";
    }
}

即使这意味着使用名称或值但不使用id，否则我必须使用差异ID名称来设置每个LI的样式

甚至可以使用INNERHTMl属性，但是请不要给我jQuery或仅使用javascript或普通CSS的其他库，甚至不能使用IE8或更高版本。

Answer 1

这里的一种方法是使用classList API。

如果您上课：

.full-width {
width: 100%;
}

然后，您可以部署以下javascript：

function toggleFullWidth() {
    this.classList.toggle('full-width');
}

var listItems = document.getElementsByTagName('li');

for (var i = 0; i < listItems.length; i++) {
    listItems[i].addEventListener('click', toggleFullWidth, false);
}

---

注意：这不是一个“为您做功课”的答案。 这是给您足够的想法，让您开始并自己产生效果。

Answer 2

您可以使用document.querySelectorAll（）遍历#gallery所有li元素，并附加click事件侦听器。

在带有条件（三元）运算符的事件处理程序中，更新el.style.width属性。

码：

 document .querySelectorAll('#gallery ul li') .forEach(function (el) { el.addEventListener('click', function() { el.style.width = el.style.width === '100%' ? '30%' : '100%'; }); }); 

 #gallery{background-color:#0f0;display:block;width:80%;height:80%;min-width:180px;border:#060 solid 1px;text-align:center;position:fixed;position:absolute\\9;margin-top:5%\\9;top:expression(eval(document.body.scrollTop))\\9;top:10%;left:10%;/* Box shadow */filter: progid:DXImageTransform.Microsoft.Shadow(color='#006600', Direction=112.7, Strength=5);-webkit-box-shadow:1px 3px 15px #060;-moz-box-shadow:1px 3px 15px #060;box-shadow:1px 3px 15px #060;} #gallery h1{background-color:#060;width:95%;min-width:150px;padding:10px;font-size:20px;color:#0f0;border-top:#060 solid 1px;border-bottom:#060 solid 1px;margin:5% 0px 3% 0px;/* Box shadow */filter: progid:DXImageTransform.Microsoft.Shadow(color='#111111', Direction=112.7, Strength=5);-webkit-box-shadow:-1px 0px 15px #111;-moz-box-shadow:-1px 0px 15px #111;box-shadow:-1px 0px 15px #111;} #gallery ul{background-color:#080;width:100%;height:80%;padding:10px 0px;margin-bottom:10px;border-top:#040 solid 1px;border-bottom:#040 solid 1px;display:block;overflow:scroll;overflow-x:hidden;} #gallery li{width:30%;height:200px;border:#090 solid 1px;margin:10px 1.3%;float:left;display:inline-block;/* Box shadow */-webkit-box-shadow:-1px 0px 15px #020;-moz-box-shadow:-1px 0px 15px #020;box-shadow:-1px 0px 15px #020;cursor:pointer;} 

 <div id="gallery"> <h1> Browse Our Gallery <a href="javascript:gallery()" style="font-size:29px;color:maroon;background-color:#050505;padding:5px 10px;float:right;margin-top:-10px;margin-right:-10px;">X</a></h1> <ul> <li name="item1"><a><img src="Front-card.png" alt="" width="100%" height="100%" /></a></li> <li name="item2"><a><img src="Front-card.png" alt="" width="100%" height="100%" /></a></li> <li name="item3"><a><img src="Front-card.png" alt="" width="100%" height="100%" /></a></li> <li name="item4"><a><img src="Front-card.png" alt="" width="100%" height="100%" /></a></li> <li name="item5"><a><img src="Front-card.png" alt="" width="100%" height="100%" /></a></li> <li name="item6"><a><img src="Front-card.png" alt="" width="100%" height="100%" /></a></li> <li name="item7"><a><img src="Front-card.png" alt="" width="100%" height="100%" /></a></li> <li name="item8"><a><img src="Front-card.png" alt="" width="100%" height="100%" /></a></li> <li name="item9"><a><img src="Front-card.png" alt="" width="100%" height="100%" /></a></li> <li name="item10"><a><img src="Front-card.png" alt="" width="100%" height="100%" /></a></li> <li name="item11"><a><img src="Front-card.png" alt="" width="100%" height="100%" /></a></li> <li name="item12"><a><img src="Front-card.png" alt="" width="100%" height="100%" /></a></li> </ul> </div> 

Answer 3

这是一个工作示例：

 var li = document.querySelectorAll('.list-item'); function active(){ if(this.className.indexOf('active') > -1){ li.forEach(function(e){ e.classList.remove('active'); }) } else { li.forEach(function(e){ e.classList.remove('active'); }) this.classList.add('active'); } } li.forEach(function(e){ e.addEventListener('click', active, false) }); 

 #gallery{ background-color:#0f0; display:block; width:80%; height:80%; min-width:180px; border:#060 solid 1px; text-align:center; position:fixed; position:absolute\\9; margin-top:5%\\9; top:expression(eval(document.body.scrollTop))\\9; top:10%; left:10%; /* Box shadow */ filter: progid:DXImageTransform.Microsoft.Shadow(color='#006600', Direction=112.7, Strength=5); -webkit-box-shadow:1px 3px 15px #060; -moz-box-shadow:1px 3px 15px #060; box-shadow:1px 3px 15px #060; } #gallery h1{ background-color:#060; width:95%; min-width:150px; padding:10px; font-size:20px; color:#0f0; border-top:#060 solid 1px; border-bottom:#060 solid 1px; margin:5% 0px 3% 0px; /* Box shadow */ filter: progid:DXImageTransform.Microsoft.Shadow(color='#111111', Direction=112.7, Strength=5); -webkit-box-shadow:-1px 0px 15px #111; -moz-box-shadow:-1px 0px 15px #111; box-shadow:-1px 0px 15px #111; } #gallery ul{ background-color:#080; width:100%; height:80%; padding:10px 0px; margin-bottom:10px; border-top:#040 solid 1px; border-bottom:#040 solid 1px; display:block; overflow:scroll; overflow-x:hidden; } #gallery li{ width:30%; height:200px; border:#090 solid 1px; margin:10px 1.3%; float:left; display:inline-block; /* Box shadow */ -webkit-box-shadow:-1px 0px 15px #020; -moz-box-shadow:-1px 0px 15px #020; box-shadow:-1px 0px 15px #020; cursor:pointer; } .active{ width: 100% !important; } 

 <div id="gallery"> <h1> Browse Our Gallery <a class = "reset-btn" href="javascript:gallery()" style="font-size:29px;color:maroon;background-color:#050505;padding:5px 10px;float:right;margin-top:-10px;margin-right:-10px;"> X </a> </h1> <ul> <li class = "list-item" name="item1"><a href="javascript:list(item1);"><img src="Front-card.png" alt="" width="100%" height="100%" /></a></li> <li class = "list-item" name="item2"><a href="javascript:list(item2);"><img src="Front-card.png" alt="" width="100%" height="100%" /></a></li> <li class = "list-item" name="item3"><a href="javascript:list(item3);"><img src="Front-card.png" alt="" width="100%" height="100%" /></a></li> <li class = "list-item" name="item4"><a href="javascript:list(item4);"><img src="Front-card.png" alt="" width="100%" height="100%" /></a></li> <li class = "list-item" name="item5"><a href="javascript:list(item5);"><img src="Front-card.png" alt="" width="100%" height="100%" /></a></li> <li class = "list-item" name="item6"><a href="javascript:list(item6);"><img src="Front-card.png" alt="" width="100%" height="100%" /></a></li> <li class = "list-item" name="item7"><a href="javascript:list(item7);"><img src="Front-card.png" alt="" width="100%" height="100%" /></a></li> <li class = "list-item" name="item8"><a href="javascript:list(item8);"><img src="Front-card.png" alt="" width="100%" height="100%" /></a></li> <li class = "list-item" name="item9"><a href="javascript:list(item9);"><img src="Front-card.png" alt="" width="100%" height="100%" /></a></li> <li class = "list-item" name="item10"><a href="javascript:list(item10);"><img src="Front-card.png" alt="" width="100%" height="100%" /></a></li> <li class = "list-item" name="item11"><a href="javascript:list(item11);"><img src="Front-card.png" alt="" width="100%" height="100%" /></a></li> <li class = "list-item" name="item12"><a href="javascript:list(item12);"><img src="Front-card.png" alt="" width="100%" height="100%" /></a></li> </ul> </div>