首页 > 代码库 > 通过控制高度来控制搜索条件

通过控制高度来控制搜索条件

2024-07-10 00:40:31   227人阅读

需求：通过更多按钮来实现搜索条件的收缩和展开。

以前没做过类似的需求，自己去京东等各大网站参考了一下，大概明白了思路：

通过控制搜索块的高度来隐藏搜索条件

  $("span.o-more").bind("click", function () {        var $cur = $(this).parent().prev();        if ($cur.hasClass("unfold")) {            $cur.removeClass("unfold");            $cur.css("height", "auto");        }        else {            $cur.addClass("unfold");            $cur.css("height", "25px");        }    })

.o-more为更多按钮类，unfold为空的css类

当搜索条件加载完成后，先通过高度判断是否移除更多按钮

var showTimes = 0;function advancedSearch() {    $("#search_div").toggle();    if (showTimes==0) {    $(".tit3").each(function (i, n) {        showTimes++;        $(this).removeClass("unfold");        var nheight = parseInt($(this).css("height").replace(/[^0-9]/ig, ""));        if (nheight > 35) {            $(this).addClass("unfold");            $(this).css("height", "25px");        }        else {            $(this).next().remove();        }    })    }}

　判断一次就可以了，其中.title3为收缩块

效果如上


联系
我们