0

我有一个脚本，它显示一个隐藏在一个 li 中的 div，但目前它只显示第一个 li 的 div，脚本在另一个 li 上添加“selected”类，但显示第一个 li 的 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();
});
4

2 回答 2

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();
});
于 2013-06-05T21:38:20.043 回答
0

您似乎从未从任何 <li> 中删除“选定”类。在每次单击时，在添加此行之前：

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

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

此外，正如 Kevin B 所提到的，点击中的点击是一种非常奇怪的结构。您可能最好只jqmData(slidemenu)在一开始就单击然后检查其中的“选定”类，而不是尝试将 if 放在外面并有条件地绑定它。或者，根据 HTML，可能会执行类似 `li.selected > :jqmData(slidemenu)' 之类的选择器（显然，我在猜测您的 DOM 的结构）。

于 2013-06-05T21:17:35.113 回答