v1.0核心
v1.0实例
v2.0

Filter 筛选

使用说明 JS

在分类信息站中经常可见到多值联合筛选，本框架解释实际需要开发了联合筛选功能。

类型
动作片冒险片惊悚片恐怖片爱情骗伦理科幻片喜剧片战争片动画片故事片其他
展开
地区
美国中国香港台湾日本韩国英国法国德国泰国其他
评分
9~10分8~9分7~8分6~7分5~6分5分以下
排序
最新发布最近公映最受欢迎最高评分最多下载
搜索
热门搜索：盗梦空间盗墓笔记
JS HTML 
  • <script type='text/javascript'>
    $(document).ready(function () {

              $('.ax-filter .ax-toggle').click(function(){
            if($(this).parent().parent().find(".ax-other").is(':visible')==true){
                $(this).find('em').html("展开");
                $(this).find('.ax-iconfont').removeClass('ax-rotate-180');
                $(this).parent().parent().find(".ax-other").slideUp(200);

            }else{
                $(this).find('em').html("关闭");
                $(this).find('.ax-iconfont').addClass('ax-rotate-180');
                $(this).parent().parent().find(".ax-other").slideDown(200);
            }
        });
    });
</script>
                        
  •                              <div class="ax-filter">
                                    <div class="ax-ad">
                                        <a href="###"><img src="https://src.axui.cn/v1.0/examples/images/filter-ad.jpg" /></a>
                                    </div>
                                    <div class="ax-break-xs"></div>
                                    <div class="ax-item ax-flex-row">
                                        <span class="ax-head">类型</span><div class="ax-flex-block"><div class="ax-text"><a href="###" class="ax-active">动作片</a><a href="###">冒险片</a><a href="###">惊悚片</a><a href="###">恐怖片</a><a href="###">爱情骗</a><a href="###">伦理</a><a href="###">科幻片</a><a href="###">喜剧片</a><a href="###">战争片</a><a href="###">动画片</a><a href="###">故事片</a><a href="###">其他</a><span class="ax-hide-pc"></span></div></div><a href="###" class="ax-toggle"><em>展开</em><i class="ax-iconfont ax-icon-down"></i></a>
                                    </div>
                                    <div class="ax-other">
                                        <div class="ax-item ax-flex-row">
                                            <span class="ax-head">地区</span><div class="ax-flex-block"><div class="ax-text"><a href="###">美国</a><a href="###" class="ax-active">中国</a><a href="###">香港</a><a href="###">台湾</a><a href="###">日本</a><a href="###">韩国</a><a href="###">英国</a><a href="###">法国</a><a href="###">德国</a><a href="###">泰国</a><a href="###">其他</a><span class="ax-hide-pc"></span></div></div>
                                        </div>

                                        <div class="ax-item ax-flex-row">
                                            <span class="ax-head">评分</span><div class="ax-flex-block"><div class="ax-text"><a href="###">9~10分</a><a href="###" class="ax-active">8~9分</a><a href="###">7~8分</a><a href="###">6~7分</a><a href="###">5~6分</a><a href="###">5分以下</a><span class="ax-hide-pc"></span></div></div>
                                        </div>

                                        <div class="ax-item ax-flex-row">
                                            <span class="ax-head">排序</span><div class="ax-flex-block"><div class="ax-text"><a href="###">最新发布</a><a href="###">最近公映</a><a href="###">最受欢迎</a><a href="###">最高评分</a><a href="###">最多下载</a><span class="ax-hide-pc"></span></div></div>
                                        </div>
                                        <div class="ax-break-xs"></div>
                                        <div class="ax-break-line"></div>
                                        <div class="ax-break-xs"></div>
                                        <div class="ax-item ax-flex-row ax-search-box">
                                            <span class="ax-head">搜索</span><div class="ax-flex-block">
                                                <div class="ax-text">
                                                    <div class="ax-search"><input type="text" placeholder="关键字搜索"/><a href="###" class="ax-iconfont ax-icon-search"></a></div><span class="ax-hot">热门搜索：<a href="###">盗梦空间</a><a href="###">盗墓笔记</a></span>
                                                </div>
                                            </div>
                                        </div>

                                    </div>
                                    <div class="ax-break-xs"></div>


                                </div>

其他组合风格 JS

结合ax-border和ax-padding样式组合成不同风格。

类型
动作片冒险片惊悚片恐怖片爱情骗伦理科幻片喜剧片战争片动画片故事片其他
展开
地区
美国中国香港台湾日本韩国英国法国德国泰国其他
评分
9~10分8~9分7~8分6~7分5~6分5分以下
排序
最新发布最近公映最受欢迎最高评分最多下载
搜索
热门搜索：盗梦空间盗墓笔记
类型
动作片冒险片惊悚片恐怖片爱情骗伦理科幻片喜剧片战争片动画片故事片其他
展开
地区
美国中国香港台湾日本韩国英国法国德国泰国其他
评分
9~10分8~9分7~8分6~7分5~6分5分以下
排序
最新发布最近公映最受欢迎最高评分最多下载
搜索
热门搜索：盗梦空间盗墓笔记
类型
动作片冒险片惊悚片恐怖片爱情骗伦理科幻片喜剧片战争片动画片故事片其他
展开
地区
美国中国香港台湾日本韩国英国法国德国泰国其他
评分
9~10分8~9分7~8分6~7分5~6分5分以下
排序
最新发布最近公映最受欢迎最高评分最多下载
搜索
热门搜索：盗梦空间盗墓笔记 
                                <div class="ax-filter ax-border">
                                    <div class="ax-ad">
                                        <a href="###"><img src="https://src.axui.cn/v1.0/examples/images/filter-ad.jpg" /></a>
                                    </div>
                                    <div class="ax-break-xs"></div>
                                    <div class="ax-item ax-flex-row">
                                        <span class="ax-head">类型</span><div class="ax-flex-block"><div class="ax-text"><a href="###" class="ax-active">动作片</a><a href="###">冒险片</a><a href="###">惊悚片</a><a href="###">恐怖片</a><a href="###">爱情骗</a><a href="###">伦理</a><a href="###">科幻片</a><a href="###">喜剧片</a><a href="###">战争片</a><a href="###">动画片</a><a href="###">故事片</a><a href="###">其他</a><span class="ax-hide-pc"></span></div></div><a href="###" class="ax-toggle"><em>展开</em><i class="ax-iconfont ax-icon-down"></i></a>
                                    </div>
                                    <div class="ax-other">
                                        <div class="ax-item ax-flex-row">
                                            <span class="ax-head">地区</span><div class="ax-flex-block"><div class="ax-text"><a href="###">美国</a><a href="###" class="ax-active">中国</a><a href="###">香港</a><a href="###">台湾</a><a href="###">日本</a><a href="###">韩国</a><a href="###">英国</a><a href="###">法国</a><a href="###">德国</a><a href="###">泰国</a><a href="###">其他</a><span class="ax-hide-pc"></span></div></div>
                                        </div>

                                        <div class="ax-item ax-flex-row">
                                            <span class="ax-head">评分</span><div class="ax-flex-block"><div class="ax-text"><a href="###">9~10分</a><a href="###" class="ax-active">8~9分</a><a href="###">7~8分</a><a href="###">6~7分</a><a href="###">5~6分</a><a href="###">5分以下</a><span class="ax-hide-pc"></span></div></div>
                                        </div>

                                        <div class="ax-item ax-flex-row">
                                            <span class="ax-head">排序</span><div class="ax-flex-block"><div class="ax-text"><a href="###">最新发布</a><a href="###">最近公映</a><a href="###">最受欢迎</a><a href="###">最高评分</a><a href="###">最多下载</a><span class="ax-hide-pc"></span></div></div>
                                        </div>
                                        <div class="ax-break-xs"></div>
                                        <div class="ax-break-line"></div>
                                        <div class="ax-break-xs"></div>
                                        <div class="ax-item ax-flex-row ax-search-box">
                                            <span class="ax-head">搜索</span><div class="ax-flex-block">
                                                <div class="ax-text">
                                                    <div class="ax-search"><input type="text" placeholder="关键字搜索"/><a href="###" class="ax-iconfont ax-icon-search"></a></div><span class="ax-hot">热门搜索：<a href="###">盗梦空间</a><a href="###">盗墓笔记</a></span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="ax-break-xs"></div>

                                </div>
                                <div class="ax-break"></div>
                                <div class="ax-filter ax-border">
                                    <div class="ax-break-xs"></div>
                                    <div class="ax-item ax-flex-row">
                                        <span class="ax-head">类型</span><div class="ax-flex-block"><div class="ax-text"><a href="###" class="ax-active">动作片</a><a href="###">冒险片</a><a href="###">惊悚片</a><a href="###">恐怖片</a><a href="###">爱情骗</a><a href="###">伦理</a><a href="###">科幻片</a><a href="###">喜剧片</a><a href="###">战争片</a><a href="###">动画片</a><a href="###">故事片</a><a href="###">其他</a><span class="ax-hide-pc"></span></div></div><a href="###" class="ax-toggle"><em>展开</em><i class="ax-iconfont ax-icon-down"></i></a>
                                    </div>
                                    <div class="ax-other">
                                        <div class="ax-item ax-flex-row">
                                            <span class="ax-head">地区</span><div class="ax-flex-block"><div class="ax-text"><a href="###">美国</a><a href="###" class="ax-active">中国</a><a href="###">香港</a><a href="###">台湾</a><a href="###">日本</a><a href="###">韩国</a><a href="###">英国</a><a href="###">法国</a><a href="###">德国</a><a href="###">泰国</a><a href="###">其他</a><span class="ax-hide-pc"></span></div></div>
                                        </div>

                                        <div class="ax-item ax-flex-row">
                                            <span class="ax-head">评分</span><div class="ax-flex-block"><div class="ax-text"><a href="###">9~10分</a><a href="###" class="ax-active">8~9分</a><a href="###">7~8分</a><a href="###">6~7分</a><a href="###">5~6分</a><a href="###">5分以下</a><span class="ax-hide-pc"></span></div></div>
                                        </div>

                                        <div class="ax-item ax-flex-row">
                                            <span class="ax-head">排序</span><div class="ax-flex-block"><div class="ax-text"><a href="###">最新发布</a><a href="###">最近公映</a><a href="###">最受欢迎</a><a href="###">最高评分</a><a href="###">最多下载</a><span class="ax-hide-pc"></span></div></div>
                                        </div>
                                        <div class="ax-break-xs"></div>
                                        <div class="ax-break-line"></div>
                                        <div class="ax-break-xs"></div>
                                        <div class="ax-item ax-flex-row ax-search-box">
                                            <span class="ax-head">搜索</span><div class="ax-flex-block">
                                                <div class="ax-text">
                                                    <div class="ax-search"><input type="text" placeholder="关键字搜索"/><a href="###" class="ax-iconfont ax-icon-search"></a></div><span class="ax-hot">热门搜索：<a href="###">盗梦空间</a><a href="###">盗墓笔记</a></span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="ax-break-xs"></div>

                                </div>
                                <div class="ax-break"></div>
                                <div class="ax-filter ax-border ax-padding">
                                    <div class="ax-ad">
                                        <a href="###"><img src="https://src.axui.cn/v1.0/examples/images/filter-ad.jpg" /></a>
                                    </div>
                                    <div class="ax-break"></div>
                                    <div class="ax-item ax-flex-row">
                                        <span class="ax-head">类型</span><div class="ax-flex-block"><div class="ax-text"><a href="###" class="ax-active">动作片</a><a href="###">冒险片</a><a href="###">惊悚片</a><a href="###">恐怖片</a><a href="###">爱情骗</a><a href="###">伦理</a><a href="###">科幻片</a><a href="###">喜剧片</a><a href="###">战争片</a><a href="###">动画片</a><a href="###">故事片</a><a href="###">其他</a><span class="ax-hide-pc"></span></div></div><a href="###" class="ax-toggle"><em>展开</em><i class="ax-iconfont ax-icon-down"></i></a>
                                    </div>
                                    <div class="ax-other">
                                        <div class="ax-item ax-flex-row">
                                            <span class="ax-head">地区</span><div class="ax-flex-block"><div class="ax-text"><a href="###">美国</a><a href="###" class="ax-active">中国</a><a href="###">香港</a><a href="###">台湾</a><a href="###">日本</a><a href="###">韩国</a><a href="###">英国</a><a href="###">法国</a><a href="###">德国</a><a href="###">泰国</a><a href="###">其他</a><span class="ax-hide-pc"></span></div></div>
                                        </div>

                                        <div class="ax-item ax-flex-row">
                                            <span class="ax-head">评分</span><div class="ax-flex-block"><div class="ax-text"><a href="###">9~10分</a><a href="###" class="ax-active">8~9分</a><a href="###">7~8分</a><a href="###">6~7分</a><a href="###">5~6分</a><a href="###">5分以下</a><span class="ax-hide-pc"></span></div></div>
                                        </div>

                                        <div class="ax-item ax-flex-row">
                                            <span class="ax-head">排序</span><div class="ax-flex-block"><div class="ax-text"><a href="###">最新发布</a><a href="###">最近公映</a><a href="###">最受欢迎</a><a href="###">最高评分</a><a href="###">最多下载</a><span class="ax-hide-pc"></span></div></div>
                                        </div>
                                        <div class="ax-break"></div>
                                        <div class="ax-break-line"></div>
                                        <div class="ax-break"></div>
                                        <div class="ax-item ax-flex-row ax-search-box">
                                            <span class="ax-head">搜索</span><div class="ax-flex-block">
                                                <div class="ax-text">
                                                    <div class="ax-search"><input type="text" placeholder="关键字搜索"/><a href="###" class="ax-iconfont ax-icon-search"></a></div><span class="ax-hot">热门搜索：<a href="###">盗梦空间</a><a href="###">盗墓笔记</a></span>
                                                </div>
                                            </div>
                                        </div>



                                    </div>


                                </div>

默认展开JS

框架默认筛选是显示第一行，通过调整ax-other包裹的位置可以选择显示任意行；如果需要默认全部显示，需要按两步调整代码：

  • 第一步：修改ax-toggle按钮内容为<a href="###" class="ax-toggle"><em>关闭<i class="ax-iconfont ax-icon-down ax-rotate-180"></i></a>
  • 第二步：对ax-other写上style：style="display: block;"
类型
动作片冒险片惊悚片恐怖片爱情骗伦理科幻片喜剧片战争片动画片故事片其他
展开
地区
美国中国香港台湾日本韩国英国法国德国泰国其他
评分
9~10分8~9分7~8分6~7分5~6分5分以下
排序
最新发布最近公映最受欢迎最高评分最多下载
搜索
热门搜索：盗梦空间盗墓笔记
类型
动作片冒险片惊悚片恐怖片爱情骗伦理科幻片喜剧片战争片动画片故事片其他
关闭
地区
美国中国香港台湾日本韩国英国法国德国泰国其他
评分
9~10分8~9分7~8分6~7分5~6分5分以下
排序
最新发布最近公映最受欢迎最高评分最多下载
搜索
热门搜索：盗梦空间盗墓笔记 
                                    <div class="ax-filter ax-border">
                                    <div class="ax-ad">
                                        <a href="###"><img src="https://src.axui.cn/v1.0/examples/images/filter-ad.jpg" /></a>
                                    </div>
                                    <div class="ax-break-xs"></div>
                                    <div class="ax-item ax-flex-row">
                                        <span class="ax-head">类型</span><div class="ax-flex-block"><div class="ax-text"><a href="###" class="ax-active">动作片</a><a href="###">冒险片</a><a href="###">惊悚片</a><a href="###">恐怖片</a><a href="###">爱情骗</a><a href="###">伦理</a><a href="###">科幻片</a><a href="###">喜剧片</a><a href="###">战争片</a><a href="###">动画片</a><a href="###">故事片</a><a href="###">其他</a><span class="ax-hide-pc"></span></div></div><a href="###" class="ax-toggle"><em>展开</em><i class="ax-iconfont ax-icon-down"></i></a>
                                    </div>
                                        <div class="ax-item ax-flex-row">
                                            <span class="ax-head">地区</span><div class="ax-flex-block"><div class="ax-text"><a href="###">美国</a><a href="###" class="ax-active">中国</a><a href="###">香港</a><a href="###">台湾</a><a href="###">日本</a><a href="###">韩国</a><a href="###">英国</a><a href="###">法国</a><a href="###">德国</a><a href="###">泰国</a><a href="###">其他</a><span class="ax-hide-pc"></span></div></div>
                                        </div>
                                    <div class="ax-other">
                                        <div class="ax-item ax-flex-row">
                                            <span class="ax-head">评分</span><div class="ax-flex-block"><div class="ax-text"><a href="###">9~10分</a><a href="###" class="ax-active">8~9分</a><a href="###">7~8分</a><a href="###">6~7分</a><a href="###">5~6分</a><a href="###">5分以下</a><span class="ax-hide-pc"></span></div></div>
                                        </div>

                                        <div class="ax-item ax-flex-row">
                                            <span class="ax-head">排序</span><div class="ax-flex-block"><div class="ax-text"><a href="###">最新发布</a><a href="###">最近公映</a><a href="###">最受欢迎</a><a href="###">最高评分</a><a href="###">最多下载</a><span class="ax-hide-pc"></span></div></div>
                                        </div>
                                        <div class="ax-break-xs"></div>
                                        <div class="ax-break-line"></div>
                                        <div class="ax-break-xs"></div>
                                        <div class="ax-item ax-flex-row ax-search-box">
                                            <span class="ax-head">搜索</span><div class="ax-flex-block">
                                                <div class="ax-text">
                                                    <div class="ax-search"><input type="text" placeholder="关键字搜索"/><a href="###" class="ax-iconfont ax-icon-search"></a></div><span class="ax-hot">热门搜索：<a href="###">盗梦空间</a><a href="###">盗墓笔记</a></span>
                                                </div>
                                            </div>
                                        </div>

                                    </div>
                                    <div class="ax-break-xs"></div>


                                </div>
                                <div class="ax-break"></div>
                                <div class="ax-filter ax-border">
                                    <div class="ax-ad">
                                        <a href="###"><img src="https://src.axui.cn/v1.0/examples/images/filter-ad.jpg" /></a>
                                    </div>
                                    <div class="ax-break-xs"></div>
                                    <div class="ax-item ax-flex-row">
                                        <span class="ax-head">类型</span><div class="ax-flex-block"><div class="ax-text"><a href="###" class="ax-active">动作片</a><a href="###">冒险片</a><a href="###">惊悚片</a><a href="###">恐怖片</a><a href="###">爱情骗</a><a href="###">伦理</a><a href="###">科幻片</a><a href="###">喜剧片</a><a href="###">战争片</a><a href="###">动画片</a><a href="###">故事片</a><a href="###">其他</a><span class="ax-hide-pc"></span></div></div><a href="###" class="ax-toggle"><em>关闭</em><i class="ax-iconfont ax-icon-down ax-rotate-180"></i></a>
                                    </div>
                                    <div class="ax-other" style="display: block;">
                                        <div class="ax-item ax-flex-row">
                                            <span class="ax-head">地区</span><div class="ax-flex-block"><div class="ax-text"><a href="###">美国</a><a href="###" class="ax-active">中国</a><a href="###">香港</a><a href="###">台湾</a><a href="###">日本</a><a href="###">韩国</a><a href="###">英国</a><a href="###">法国</a><a href="###">德国</a><a href="###">泰国</a><a href="###">其他</a><span class="ax-hide-pc"></span></div></div>
                                        </div>

                                        <div class="ax-item ax-flex-row">
                                            <span class="ax-head">评分</span><div class="ax-flex-block"><div class="ax-text"><a href="###">9~10分</a><a href="###" class="ax-active">8~9分</a><a href="###">7~8分</a><a href="###">6~7分</a><a href="###">5~6分</a><a href="###">5分以下</a><span class="ax-hide-pc"></span></div></div>
                                        </div>

                                        <div class="ax-item ax-flex-row">
                                            <span class="ax-head">排序</span><div class="ax-flex-block"><div class="ax-text"><a href="###">最新发布</a><a href="###">最近公映</a><a href="###">最受欢迎</a><a href="###">最高评分</a><a href="###">最多下载</a><span class="ax-hide-pc"></span></div></div>
                                        </div>
                                        <div class="ax-break-xs"></div>
                                        <div class="ax-break-line"></div>
                                        <div class="ax-break-xs"></div>
                                        <div class="ax-item ax-flex-row ax-search-box">
                                            <span class="ax-head">搜索</span><div class="ax-flex-block">
                                                <div class="ax-text">
                                                    <div class="ax-search"><input type="text" placeholder="关键字搜索"/><a href="###" class="ax-iconfont ax-icon-search"></a></div><span class="ax-hot">热门搜索：<a href="###">盗梦空间</a><a href="###">盗墓笔记</a></span>
                                                </div>
                                            </div>
                                        </div>

                                    </div>
                                    <div class="ax-break-xs"></div>


                                </div>