Jquery是一款流行的Javascript库,使用它可以方便地完成常用的页面交互效果。其中,点击下拉对应收缩是常见的一种效果,下面就让我们来学习如何使用Jquery完成这种效果。
$(document).ready(function(){ //先隐藏所有下拉内容 $('.dropdown-content').hide(); //给所有下拉按钮添加点击事件 $('.dropdown-button').click(function(){ //获取当前下拉按钮对应的下拉内容 var dropdown = $(this).next('.dropdown-content'); //收缩/展开下拉内容 dropdown.slideToggle(300); }); });
以上代码中,我们首先使用Jquery选择了所有的下拉内容(.dropdown-content)并将它们隐藏起来。接着,我们又选择了所有的下拉按钮(.dropdown-button),并为它们添加了一个点击事件。在点击事件中,我们首先获取了当前点击按钮对应的下拉内容,然后使用滑动效果使它收缩/展开。
这样,我们就完成了一个简单的点击下拉对应收缩效果。这种效果经常用于导航栏、筛选条件等地方,可以方便地隐藏或展示更多的内容。