淘先锋技术网

首页 1 2 3 4 5 6 7

Jquery是一款流行的Javascript库,使用它可以方便地完成常用的页面交互效果。其中,点击下拉对应收缩是常见的一种效果,下面就让我们来学习如何使用Jquery完成这种效果。


$(document).ready(function(){
    //先隐藏所有下拉内容
    $('.dropdown-content').hide();
    //给所有下拉按钮添加点击事件
    $('.dropdown-button').click(function(){
        //获取当前下拉按钮对应的下拉内容
        var dropdown = $(this).next('.dropdown-content');
        //收缩/展开下拉内容
        dropdown.slideToggle(300);
    });
});

jquery点击下拉对应收缩

以上代码中,我们首先使用Jquery选择了所有的下拉内容(.dropdown-content)并将它们隐藏起来。接着,我们又选择了所有的下拉按钮(.dropdown-button),并为它们添加了一个点击事件。在点击事件中,我们首先获取了当前点击按钮对应的下拉内容,然后使用滑动效果使它收缩/展开。

这样,我们就完成了一个简单的点击下拉对应收缩效果。这种效果经常用于导航栏、筛选条件等地方,可以方便地隐藏或展示更多的内容。