Filter 筛选

使用说明

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

  • <script type='text/javascript'>
    document.querySelectorAll('.ax-filter .ax-toggle').forEach(function (item) {
        let parent = item.parentNode.parentNode;
        item.onclick = function () {
            if (axIsVisible(parent.querySelector('.ax-other'))) {
                this.querySelector('em').innerHTML = '展开';
                this.querySelector('.ax-iconfont').classList.remove('ax-deg180');
                axSlideUp(parent.querySelector('.ax-other'));
            } else {
                this.querySelector('em').innerHTML = '关闭';
                this.querySelector('.ax-iconfont').classList.add('ax-deg180');
                axSlideDown(parent.querySelector('.ax-other'));
            }
        }
    })
    </script>
                            
  •                              <div class="ax-filter">
                                        <div class="ax-question">
                                            <a href="###"><img src="https://src.axui.cn/v2.0/public/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"><s>展开</s><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>
                                            <hr/>
                                            <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>
                            

其他组合风格

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

                                <div class="ax-filter ax-border">
                                    <div class="ax-question">
                                        <a href="###"><img src="https://src.axui.cn/v2.0/public/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"><s>展开</s><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>
                                        <hr/>
                                        <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"><s>展开</s><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>
                                        <hr/>
                                        <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-question">
                                        <a href="###"><img src="https://src.axui.cn/v2.0/public/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"><s>展开</s><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>
                                        <hr/>
                                        <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>
                        

默认展开

框架默认筛选是显示第一行,通过调整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-question">
                                        <a href="###"><img src="https://src.axui.cn/v2.0/public/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"><s>展开</s><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>
                                        <hr/>
                                        <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-question">
                                        <a href="###"><img src="https://src.axui.cn/v2.0/public/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>
                                        <hr/>
                                        <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>