使用JavaScript更改单击的LI宽度

Question

我有一个清单项目，例如画廊，我所有的li都坐在30％的宽度和浮动中，无论如何我要做的是，如果我单击特定的li，我只想要李要更改为100％宽度，其他宽度将属于它，但单击X应该使其宽度为30％，因此请单击另一个LI和最终结果将所有其他LI切换到30％，而我选择的Li是100％宽度。

我要完成的是让我选择的li，它仅显示30％的全宽度和高度图像，以占据图库的全宽度并显示隐藏的内容，例如项目信息。因此：

将图像宽度设置为固定宽度，显示旁边的内容将LI宽度扩展到盒子的100％。然后使用X或另一个LI（如果函数）关闭图像时逆转动作

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

		
#gallery{
	background-color:#0f0;
	display:block;
	width:80%;
	height:80%;
	min-width:180px;
	border:#060 solid 1px;
	text-align:center;
	position:fixed;
	position:absolute9;
	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>

所以我想出的是应用JavaScript onclick with List（）并做类似document.getElementBYtag或类似的事情，对不起，不熟悉JavaScript，而不是仅更改我选择的Li标签，作为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，否则我必须使用diff 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);
}

---

n.b。这不是"为您做作业"的答案。这是为了给您足够的想法开始并自己产生效果。

Answer 2

这是一个工作示例：

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:absolute9;
	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>

Answer 3

您可以使用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:absolute9;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>