在li上显示隐藏的div具有“已选择”类

Question

i have a script that display a div that is hidden in a li, but currently it only show the div from the first li, the script add the class 'selected' on the other li but show the div from the first one.

Here is my code

$(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;
}

EDIT

$(".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

Move the binding of the event to outside of $(".menu_slide").click event. This makes the event to be bound multiple times to the same element

 $(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

You don't seem to ever be removing the 'selected' class from any <li>s. On each click, before adding this line:

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

Remove 'selected' class from all potentially affected LIs and reset it.

Also, as Kevin B mentioned, a click within a click is seriously weird structure. You'd likely be better off just having the click even on jqmData(slidemenu) at the outset then checking for the 'selected' class within it, instead of trying to place the if outside and conditionally bind it. Or, depending on the HTML, perhaps do something like `li.selected > :jqmData(slidemenu)' as your selector (I'm guessing at how your DOM is structured, obviously).