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

Question

有没有办法重新创建以下代码但不使用 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>

Answer 1

完整的 CSS 解决方案:

HTML:

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

CSS:

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

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

div 将显示检查输入复选框。