H5W3
当前位置:H5W3 > 其他技术问题 > 正文

【Web前端问题】jQuery 仿京东的筛选菜单怎么在切换后原菜单仍保持选中状态?

这些按钮都有点击事件。
1、默认是这个样式:ALL 与 Filtrate 同时显示为 color: #00a0e8;

clipboard.png

2、当选中 Fingerprint 后,Fingerprint 与 Filtrate 的选中状态是一样的 color: #00a0e8;

clipboard.png

3、想要的效果是,当选中 Filtrate 时,效果同 2、保持不变。
Fingerprint 与 Filtrate 的选中状态不变,仍然是 color: #00a0e8;

但是现在情况是,当选中 Filtrate 时,Fingerprint的选中状态被取消了,怎么写才不会被取消?下面是我的代码:

<!--筛选-->
    <div class="mui-slider-group">
        <div id="slider" class="mui-slider">
            <div id="newSubProduct" class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
                <div class="mui-scroll scroll-nav">
                    <a class="js-anviz-tab mui-control-item anviz-item-all mui-active" data-id="5-0">All</a>
                    <a class="js-anviz-tab mui-control-item" data-id="5">Fingerprint</a>
                    <a class="js-anviz-tab mui-control-item" data-id="11">Facial</a>
                    <a class="js-anviz-tab mui-control-item" data-id="17">Iris</a>
                    <div id="filtrateNav" class="mui-control-item filtrate-nav" style="color: #00a0e8;">Filtrate<img src="<?php echo $this->assetsUrl; ?>/img/icon/filtrate.png" style="width: 20px;position: absolute;top:10px;"></div>
                </div>
            </div>
        </div>
    </div>

JS:这个JS只能让 1、 2、 两种效果出现,第 3、 种想要的效果出不来,怎么破?

    jQuery('#newSubProduct .scroll-nav a:not(.filtrate-nav)').on('tap',function(e){
            e.stopPropagation();
            var index = jQuery(this).index();
            var id = jQuery(this).attr('data-id');
            
            jQuery('#filtrateNav').addClass('mui-active');
            jQuery(this).parent().children("a:not(.anviz-filtrate-btn)").attr("class", "js-anviz-tab mui-control-item");
            jQuery(this).attr("class", "js-anviz-tab mui-control-item mui-active");
        });

Filtrate 的点击事件,之前与许我没描述清楚。问题在这里,执行这个#filtrateNav的点击事件之后,怎么让 Fingerprint 这个菜单仍然保持选中状态:

clipboard.png

jQuery('#filtrateNav').on('tap',function(){
    handleInit();
});

function handleInit(){
    jQuery('#Fingerprint').find('button').removeClass('mui-btn-danger');
    
    mui('#cropper-sheet').popover('toggle');
}

回答:

  1. 你的js代码有点问题, 要么全用jQuery代替$ (基于mui的前提下这么做是正确的), 要么全用$.
  2. 如果只是要添加或者删除某个类名, 使用jQuery的addClass和removeClass, 不要用attr
  3. 按照我的理解, filtrate应该是一个样式不变的nav, 而且你的点击事件代码自始至终都没有包含filtrate元素(毕竟这个元素连a标签都没有), 那么filtrate都没有点击事件, 怎么又有”选中Filtrate”一说?
    另外
            jQuery('#filtrateNav').addClass('mui-active');
            $(this).parent().children("a:not(.anviz-filtrate-btn)").attr("class", "js-anviz-tab mui-control-item").not('#filtrateNav');
            $(this).attr("class", "js-anviz-tab mui-control-item mui-active");

第二行代码写的太乱了, 不懂你的意思, 如果说是删除mui-active类名的话, 其实把第一行的代码写到第三行去, 第二行代码就可以写得比较简单轻松, 不用考虑这么多种情况


根据你后面添加的代码来看的话, 感觉是没有这个问题的 , 是不是mui自身就有这样的导航栏点击事件, 如果是, 那么你每次点之前都要记录下导航栏的状态, 然后再做判断


如果真的mui有自带事件的话,就比较难办, 你要在每次点击事件的时候记录状态;

var $active = null;

/*状态记录函数*/
function navActivated(){
    $active = jQuery(".js-anviz-tab:not(#filtrateNav):has(.mui-active)");
}

/*初始化状态*/

navActivated();

/*点击事件*/
jQuery(document).on("click","#newSubProduct .mui-control-item",function(){
    if(jQuery(this).hasClass("filtrate-nav")){
        $active.addClass("mui-active");
    }
    jQuery("#filtrateNav").addClass("mui-active");
    navActivated();
});

回答:

疑惑惹~
这个选择 #newSubProduct .scroll-nav a:not(.filtrate-nav),意思是不是.filtrate-nav的a标签吧,也就是说点击Filtrate的div不会触发运行这段jQuery代码吧…

本文地址:H5W3 » 【Web前端问题】jQuery 仿京东的筛选菜单怎么在切换后原菜单仍保持选中状态?

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址