Filter 筛选

使用说明 JS

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

  • <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/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-borderax-padding样式组合成不同风格。

                                <div class="ax-filter ax-border">
                                    <div class="ax-ad">
                                        <a href="###"><img src="https://src.axui.cn/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/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;"
                                    <div class="ax-filter ax-border">
                                    <div class="ax-ad">
                                        <a href="###"><img src="https://src.axui.cn/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/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>