views:

53

answers:

2

Hi there. I've switched from Mootools to jQuery, because I think it has better support. I've got HTML like that:

<ul class="menuHandler">
<li class="menuTreeElement activeOpt" id="menuOpt1">
<ul id="menuOpt1Content">
<li><a href="#" class="menuOpener">Opcje</a><a href="#" class="sprite menuOpener"></a></li>
<li class="submenuElement">Opcje</li>
<li class="submenuElement">Opcje</li>
<li class="submenuElement">Opcje</li>
<li class="submenuElement">Opcje</li>
<li class="submenuElement">Opcje</li>
<li class="submenuElement">Opcje</li>
</ul>
</li>
</ul>

JS

jQuery(document).ready(function($)
{
    $('.menuTreeElement .submenuElement').hide();   
    $('.menuHandler li.menuElement, .menuHandler li.menuTreeElement').removeClass('activeOpt');
    $('.menuHandler li.menuElement, .menuHandler li.menuTreeElement').addClass('inactiveOpt');
    $('.menuHandler li.menuElement a.menuOpener, .menuHandler li.menuTreeElement a.menuOpener').click(function(e){
    e.preventDefault();
    alert(this);
    alert(this.id);
    alert($(this));
    alert(e.target);
    alert(e.target.id);
    alert($(e.target));     
    });
});

Results:

URL, Empty alert, [object Object], URL, Empty alert, [object Object]. I don't know what to do. Link if it'll help: http://misiur.com/CRP/admin/

I want to achieve that: 1. You click on a with class menuOpener 2. all li with class submenuElement inside same ul (in this case menuOpt1Content) are showing

+4  A: 
$('ul.menuHandler').delegate('a.menuOpener', 'click', function(ev){

     //prevent follow of link
     ev.preventDefault();

     //create a jquery object with the anchor element
     var $anchor = $(this);

     //get parent li with class menuTreeElement
     var $li = $anchor.closest('li');

     //get its siblings and show???
     $li.nextAll().show()


});
redsquare
Same results. It's complicated, because I need to get this a parent's siblings.
Misiur
which parent - the anchors?
redsquare
You're wrong. Look at HTML of this menuTreeElement - first child is ul - it contains li, and in first one is a. I need to show this 2 level li siblings with class "submenuElement". Your code doesn't work
Misiur
Well your question is hardly the best description in the world is it. Apologies for trying to help you out. Geeee
redsquare
My english isn't the best, so I have to workaround hard words >< Sorry.
Misiur
Right the above now works, tested on your site
redsquare
Whoa! - it worked! I dunno what I have changed, but this time it worked. Thanks
Misiur
@Misiur, I am glad, good luck with it
redsquare
A: 
$('.menuTreeElement .menuOpener').click(function(event)
{
    event.preventDefault();
    $('.menuTreeElement .submenuElement').hide();
    $(this).parent().find('.submenuElement').show();
    return false;
});
Jan Kuča
This binds lots of individual click events. Use .delegate to use event delegation
redsquare
Nope, doesn't work. "this" is still url
Misiur
I thought the goal was "1. You click on a with class menuOpener 2. all li with class submenuElement inside same ul (in this case menuOpt1Content) are showing". What do you want with a URL? If you want the hash, use this.href or $(this).attr('href').
Jan Kuča
@redsquare Thanks, I'll check it out.
Jan Kuča