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

试试这个：

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

Answer 2

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

即。当有两个单词时，background-color变为backgroundColor

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

纯JavaScript通常更快，因为你从额外的函数调用中保存（尽管你不会注意到大多数用途），并且它也将它视为单个'1'元素，所以如果div不存在你将会在控制台中出错。该错误将阻止脚本的其余部分运行。

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

您可以使用getElementById代替querySelector('#hover')进行CSS查询，但请检查浏览器支持。

Answer 3

是的，使用CSS： DEMO FIDDLE

有了这个，你就可以在不使用Javascript / Jquery的情况下点击事件。

CSS：

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

HTML

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

Answer 4

完整的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检查输入复选框。

有没有办法使用jQuery扩展点击退出的div？

4 个答案: