Question

我有一个显示隐藏在li中的div的脚本，但是目前它只显示第一个li的div，脚本在另一个li上添加“selected”类但是显示第一个的div

这是我的代码

$(document).on("pageinit", function(e){
    $(".menu_slide").click(function(event) {
        $(this).parents('li').addClass('selected');

        var sm = $($("#"+ $(e.target).attr('id') +" :jqmData(slidemenu)").data('slidemenu'));   
        var sa =  $('li.selected').attr('class');
        // console.log(sm);
        if($("li").hasClass("selected")){
            $(document).on("click", ":jqmData(slidemenu)", function(e) {
                // console.log(sm.data('slideopen'));
                slidemenu(sm, sm.data('slideopen'));
                e.stopImmediatePropagation();
                e.preventDefault();
            }); sta
        } else {
            // Todo code
        }
    });
});

function slidemenu(sm, only_close) {
    if (!sm.data('slideopen') && !only_close) {

        var swipe = $('.menu_slide_swipe');
        var wi = $(window).width();

        // Portrait Phone
        if(wi == 320){
            sm.show().animate({ left:'31px', avoidTransforms: true, useTranslate3d: true}, 'fast'); 
            swipe.show().animate({ left:'6px', avoidTransforms: true, useTranslate3d: true}, 'fast');
            sm.data('slideopen', true);
        }

        // Landscape Phone
        if (wi == 569){
            sm.show().animate({ left:'307px', avoidTransforms: true, useTranslate3d: true}, 'fast');
            swipe.show().animate({ left:'281px', avoidTransforms: true, useTranslate3d: true}, 'fast');
            sm.data('slideopen', true);         
        } 

        // Portrait Tablet
        if(wi == 769){
            sm.show().animate({width:'450px', left:'302px', avoidTransforms: true, useTranslate3d: true}, 'fast');  
            swipe.show().animate({ left:'276px', avoidTransforms: true, useTranslate3d: true}, 'fast');
            sm.data('slideopen', true);
        }

        // Landscape Tablet
        if(wi == 1024){
            sm.show().animate({width:'450px', left:'552px', avoidTransforms: true, useTranslate3d: true}, 'fast');  
            swipe.show().animate({ left:'525px', avoidTransforms: true, useTranslate3d: true}, 'fast');
            sm.data('slideopen', true);
        }

        if ($(":jqmData(role='header')").data('position') == 'fixed') {
        } else {
            $(":jqmData(slidemenu)").css('margin-left', '10px');
        }

    } else {
        var swipe = $('.menu_slide_swipe');
        sm.animate({left:'-260px', avoidTransforms: false, useTranslate3d: true}, 'fast', function(){sm.hide()});
        swipe.animate({left:'-60px', avoidTransforms: false, useTranslate3d: true}, 'fast', function(){swipe.hide()});
        sm.data('slideopen', false);
        $(":jqmData(slidemenu)").css('margin-left', '0px');
        $("li.ui-li").removeClass("selected");
    }
    return false;
}

修改

$(".menu_slide").click(function (event) {
    $(this).parents('li').addClass('selected');
    var sm = $($("#" + $(e.target).attr('id') + " :jqmData(slidemenu)").data('slidemenu'));
    var sa = $('li.selected').attr('class');
});
$(document).on("click", "li.selected :jqmData(slidemenu)", function (e) {
    var sm = $($("#" + $(e.target).attr('id') + " :jqmData(slidemenu)").data('slidemenu'));
    slidemenu(sm, sm.data('slideopen'));
    e.stopImmediatePropagation();
    e.preventDefault();
});

Answer 1

将事件的绑定移至$(".menu_slide").click事件之外。这使得事件多次绑定到同一个元素

 $(document).on("click", "li.selected :jqmData(slidemenu)", function(e) {
      // console.log(sm.data('slideopen'));
      slidemenu(sm, sm.data('slideopen'));
      e.stopImmediatePropagation();
      e.preventDefault();
});

Answer 2

您似乎永远不会从任何＆lt; li＆gt;中删除'selected'类。每次点击，在添加此行之前：

$(this).parents('li').addClass('selected');

从所有可能受影响的LI中删除“selected”类并重置它。

另外，正如Kevin B所提到的，点击内的点击是非常奇怪的结构。你可能最好只是在开始时点击jqmData(slidemenu)然后检查其中的“选定”类，而不是尝试将if置于外部并有条件地绑定它。或者，根据HTML，可能会执行类似`li.selected＆gt;的操作。：jqmData（slidemenu）'作为你的选择器（我猜你的DOM结构如何，显然）。

在li上显示隐藏的div有“选中”类

2 个答案: