li에 숨겨진 div 표시 클래스에 'selected'가 있습니다

Question

저는 li에 숨겨진 div를 표시하는 스크립트를 가지고 있지만 현재는 첫 번째 li에서 div 만 표시합니다. 스크립트는 '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

입니다. 클릭 할 때마다,이 라인을 추가하기 전에 :

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

제거 모든 잠재적으로 영향을 LI들로부터 클래스 '선택'하고 다시 설정합니다.

Kevin B가 언급했듯이 클릭 내에서의 클릭은 심각하게 이상한 구조입니다. 당신은 처음에 jqmData(slidemenu)을 클릭하는 것보다 더 나을 것이고, if를 바깥에 놓고 조건부로 바인딩하려고 시도하는 대신, 그 안의 'selected'클래스를 확인하는 것이 더 나을 것입니다. 아니면, HTML에 따라 아마도`li.selected> : jqmData (slidemenu) '를 셀렉터로 사용하십시오 (DOM이 어떻게 구조화되었는지는 분명히 짐작하고 있습니다).

Answer 2

이벤트 바인딩을 $(".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(); 
});