CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Jgoo83
Jgoo83

Reputation: 377

jquery slideDown() over-riding last element

I'm trying to slide a submenu dropdown in my mobile mode. I can't seem to push the last element out of the way. Right now it is expanding the two li's right over the current selector. 

<li class="dropdown">
  <a href="#">Solutions</a>  
  <ul class="dropdown-menu">
    <li><a href="#">ERP</a></li>
    <li><a href="#">Module</a></li>
    <li><a href="#">WMS</a></li>
    <li><a href="#">Sales Tax </a></li>
    <li class="dropdown hasKids">
      <a href="#" class="rd-with-ul">Websites &nbsp;<b class="caret-right"></b><span class="rd-submenu-toggle"></span></a>
      <ul class="dropdown-menu websiteClasses">
        <li><a href="#">A</a></li>
        <li><a href="#">B</a></li>
      </ul>
    </li>
  </ul>
</li>
<li><a href="contactUs.html" class="mobileFont">Contact</a></li>


$(".hasKids").on('click', function(){
  $(this).find(">:first-child").toggleClass('active');
})
$(".hasKids").on('click', function(){
  if ($('.hasKids').find(">:first-child").hasClass("active")){
    console.log('active');
    var submenu = $(".hasKids").find(">:nth-child(2)");
    submenu.slideDown();
  } else {
    console.log('not active');
 }
})

So i just need the dropdown hasKids, when clicked, to dropdown the two li's A and B and push the Contact Us out of the way. And when hasKids gets clicked again, the dropdown slides back up. Thanks

Upvotes: 0

Views: 78

Answers (2)

Jgoo83
Jgoo83

Reputation: 377

So I was able to come up with this solution as well, but it needs some tweaking as i go back and forth between desktop and mobile. I haven't tried your answer yet but I will over the weekend. I'm definitely going to get rid of the child selectors...yours is much cleaner looking. Thanks

$(".hasKids").on('click', function(){
            console.log($this);
            var submenu = $(".hasKids").find(">:nth-child(2)");
            if ($('.hasKids').find(">:first-child").hasClass("active")){
                submenu.removeClass();
                submenu.addClass("rd-mobilemenu_submenu");
                submenu.stop().slideDown();
            } else {
                submenu.removeClass("rd-mobilemenu_submenu");
                submenu.stop().slideUp();
                submenu.addClass("dropdown-menu");
            }
        })

Upvotes: 0

bumpy
bumpy

Reputation: 2002

Please check if this is what you need:

$(".hasKids").on('click', function(){
    $(this).children("a").toggleClass('active');
    var submenu = $(this).children(".dropdown-menu");
    if ($(this).children("a").hasClass("active")){
      console.log('active');     
      submenu.slideDown();
    } else {
      console.log('not active');
      submenu.slideUp();
   }
});

I merged the two event handlers and changed the selectors a bit to depend on classes and tags instead of the position (using >:first-child and >:nth-child selectors).

Upvotes: 1

Related Questions