有没有一种方法可以在不使用jQuery的情况下单击扩展div？

有没有一种方法可以在不使用jQuery的情况下重新创建以下代码，因为我必须为客户机使用Wix

<style>
#hover {
    width:100px;
    height:100px;
    background-color:blue;
}
</style>

<div id="hover">    
</div>   

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script>
 $("#hover").click(function(){
        $("#hover").css("width", "500px");
        $("#hover").css("transition", "all 1s");
    });
</script>

#盘旋{
宽度：100px；
高度：100px；
背景颜色：蓝色；
}
$（“#悬停”）。单击（函数（）{
$（“悬停”）.css（“宽度”，“500px”）；
$（“悬停”）.css（“过渡”、“所有1”）；
});

试试这个：

var anchor = document.getElementById('hover');
anchor.onclick = function() {
  this.style.width = '500px';
  this.style.transition = 'all 1s';
}

试试这个：

var anchor = document.getElementById('hover');
anchor.onclick = function() {
  this.style.width = '500px';
  this.style.transition = 'all 1s';
}

i、 当有两个单词时，背景色变成背景色

这与jQuery解决方案之间的区别：

纯JavaScript通常更快，因为您可以从额外的函数调用中进行保存（大多数使用您不会注意到），并且它将其视为单个“1”元素，因此如果div不存在，您将在控制台中得到一个错误。该错误将阻止脚本的其余部分运行

而jQuery将事物视为数组，所以如果没有匹配项，则数组长度为零，这不是错误

对于CSS查询，您可以使用

querySelector（“#hover”）

而不是

getElementById

，但请检查浏览器支持

i、 当有两个单词时，背景色变成背景色

这与jQuery解决方案之间的区别：

纯JavaScript通常更快，因为您可以从额外的函数调用中进行保存（大多数使用您不会注意到），并且它将其视为单个“1”元素，因此如果div不存在，您将在控制台中得到一个错误。该错误将阻止脚本的其余部分运行

而jQuery将事物视为数组，所以如果没有匹配项，则数组长度为零，这不是错误

您可以使用

querySelector（'#hover'）

进行CSS查询，而不是

getElementById

。

是，使用CSS:

这样，您就可以在不使用Javascript/Jquery的情况下执行单击事件

CSS:

HTML

是，带有CSS:

这样，您就可以在不使用Javascript/Jquery的情况下执行单击事件

CSS:

HTML

完整的CSS解决方案：

HTML:

选中输入复选框时，div将出现。

完整CSS解决方案：

HTML:

---

div将在选中输入复选框时出现。

当然可以，只需在平面javascript中编写即可

document.getElementById（）.addEventListener

等将

转换

放在css中，并在javascript中更新宽度，或者更好地使用一个名为

hover

的类和jsa div的add/remove添加/删除，并使用

单击

事件将其混淆是的，当然，只需在平面javascript中编写即可

document.getElementById（）.addEventListener

etc在css中放置

转换

，并在javascript中更新宽度，或者更好的方法是使用一个名为

hover

的类和jsa div添加/删除

click

事件混淆感谢代码和解释希望它能得到超级处理我希望这个函数在多个div上运行，因此我应该使用class，如何让它查找类而不是id？

var divs=document.querySelectorAll（…）

for（var I=0；I

对

this

的引用将导致您单击的正确div成为受影响的一个div。@matthehammond，我通常会按照CodeGodie的建议使用CSS而不是JavaScript来完成简单的事情，但这取决于你决定哪一个最适合你的项目。我也会这样做，但它对我的项目不起作用，这是我目前的项目，但仍然有问题，我想你不能帮助我，我似乎可以解决如何使它改变另一个类的css，而不是单击的类。感谢您的代码和解释，希望它能非常方便地运行。我希望这个函数能在多个div上运行，因此我应该使用class，如何让它查找类而不是id？

var divs=document.queryselectoral（…）

for（var I=0；I

引用

此

将导致您单击的正确div成为受影响的一个div。@MatthewHammond，我通常会使用CodeGodie建议的CSS，而不是简单的JavaScript，但这取决于你来决定哪个对你的项目最合适。所以我会，但是它对我的项目不起作用，这是我目前的项目，但仍然有问题，我不认为你能帮助我，我似乎能想出如何使它改变另一个类的css，而不是单击的类@太棒了！我喜欢复选框技术，它很可能在未来的项目中很有用。@tPlummer，太棒了！我喜欢复选框技术，它很可能在未来的项目中很有用。

#hover {
    width:100px;
    height:100px;
    background-color:blue;
    transition: all 1s;
}
#hover:target{
    width:500px;
}

<a href="#hover">
    <div id="hover">    
    </div>
</a>

<input type="checkbox" id="toggle">
<div class="my-div">
  My content here
</div>

.my-div {
  padding: 10px;
  color: #777;
  background: #ccc;
  display: none;
}

#toggle:checked ~ .my-div {
  display: block;
}