Search jQuery

jQuery Forum

Using jQuery

knutsford..

Collapsible Navigation

in Using jQuery • 5 years ago

I have this HTML

<li class="parent"><a href="#"> Message Streams</a>
<ul class="children">
<li class="parent1"><a href="#"> sean k</a>
<ul class="children1">
<li class="parent2"><a href="#"> TEST 2 TEST 3</a>
<ul>
<li class="children2"><a href='https://pencopyediting.com/admin/message_streams/3'> Message Stream - TEST after IPN</a></li>
</ul>
</li>
<li class="parent2"><a href="#"> sk k</a>
<ul>
<li class="children2"><a href='https://pencopyediting.com/admin/message_streams/1'> Message Stream - TEST after IPN</a></li>
<li class="children2"><a href='https://pencopyediting.com/admin/message_streams/2'> Message Stream - TEST after IPN</a></li>
<li class="children2"><a href='https://pencopyediting.com/admin/message_streams/5'> Message Stream - TEST WITH MONEY</a></li>
<li class="children2"><a href='https://pencopyediting.com/admin/message_streams/9'> Message Stream - EXAMPLE3</a></li>
<li class="children2"><a href='https://pencopyediting.com/admin/message_streams/10'> Message Stream - EXAMPLE 6</a></li>
</ul>
</li>
</ul>.
</li>
</ul>
</li>

This is the jquery for showing and collapsing but when you click on parent1 nothing happens.I put in an alert to see but it isn't being called and I can't see why

jQuery('.leftpanel .nav .parent .parent1 > a').click(function() {
var coll = jQuery(this).parents('.collapsed').length;
if (!coll) {
jQuery('.leftpanel .nav .parent-focus').each(function() {
jQuery(this).find('.children').slideUp('fast');
jQuery(this).removeClass('parent-focus');
});
var child = jQuery(this).parent().find('.children');
if(!child.is(':visible')) {
child.slideDown('fast');
if(!child.parent().hasClass('active'))
child.parent().addClass('parent-focus');
} else {
child.slideUp('fast');
child.parent().removeClass('parent-focus');
}
}
return false;
});

Similar code works for parent

Thanks

Replies(4)

watusiware

Re: Collapsible Navigation

5 years ago

Can you make a jsFiddle that we can try?

Did you just fail to post the HTML that has class='leftpanel' and class='nav'?

You also don't have any class='children'. So, this will never find anything:

var child = jQuery(this).parent().find('.children');

Your class names make this very confusing to read! You should avoid using generic terms like 'parent', 'child' (or similar words) for class names, especially when they are the same as the names of jQuery functions. You should try to write code that is easy to read, not that makes a good dyslexia test!

Minor issue: why are you repeatedly writing "jQuery"? (I'll bet this is a Wordpress site, right? Why doesn't somebody write a tutorial for WP developers that doesn't sprinkle "jQuery" everywhere?!) If you have some other library that steals $, or have to work with multiple versions of jQuery (why? Oh.... WP, or some WP theme) you can at least still wrap your code in an self-executing function that makes it easier to read:

(function($){
// Your code here, now you can use $ and not overwrite
// some global $
var $stuff = $('.stuff');
})(jQuery);

It's conventional, though, to pass more than just $, if you want to be super cautious.

http://markdalgleish.com/2011/03/self-executing-anonymous-functions/

watusiware

Re: Collapsible Navigation

5 years ago

Sorry, now I do see that you have class='children'. It is awfully hard to read - now you've made me make an eye doctor appointment!

But the parent of this is the enclosing <li> not the <ul> you are looking for.

I seldom use .parent(). Things break when you change your HTML structure! I am in love with .closest()!

this.closest('children')

will walk up the ancestors until it finds a "children" class (or nothing).

knutsford..

Re: Collapsible Navigation

5 years ago

I am confused

<li class="parent"><a href="#">User</a>
 <ul class="children">
 <li><a href='<?php echo base_url('admin/seller')?>'>Seller</a></li>
 <li><a href='<?php echo base_url('admin/buyer')?>'>Buyer</a></li>
 </ul>
</li>

This works

j jQuery('.leftpanel .nav .parent > a').click(function() {

 var coll = jQuery(this).parents('.collapsed').length;

 if (!coll) {
 jQuery('.leftpanel .nav .parent-focus').each(function() {
 jQuery(this).find('.children').slideUp('fast');
 jQuery(this).removeClass('parent-focus');
 });

 var child = jQuery(this).parent().find('.children');
 if(!child.is(':visible')) {
 child.slideDown('fast');
 if(!child.parent().hasClass('active'))
 child.parent().addClass('parent-focus');
 } else {
 child.slideUp('fast');
 child.parent().removeClass('parent-focus');
 }
 }
 return false;
 });

I just want to add another 2 layers. What should the layout look like then?

watusiware

Re: Collapsible Navigation

5 years ago

Make a fiddle. Posting eye tests to the forum is not an effective way to get your problem solved!

And we can't guess what HTML your PHP creates. Put HTML in your Fiddle.

Leave out parts that don't demonstrate the problem.

Is there some reason you are writing your own custom code instead of using some popular open-source accordian widget that will just work? Do you use jQuery UI, Bootstrap, or similar?

Top Reply

Response title

Attachments

jQuery Forum

Collapsible Navigation

Replies(4)

Re: Collapsible Navigation

Re: Collapsible Navigation

Re: Collapsible Navigation

Re: Collapsible Navigation

Statistics

Tags

Actions

Related Posts