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();
});
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();
});
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).
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.