Multiple dropdowns


#1


Can someone help me with this? I am trying to add multiple dropdowns to the project, but can't seem to get the second one to be styled.


var main = function() {
  $('.dropdown-toggle').click(function() {
    $('.dropdown-menu').toggle();
  });
  
 $('.dropdown-toggle2').click(function() {
    $('.dropdown-menu2').toggle();
});

  $('.arrow-next').click(function() {
    var currentSlide = $('.active-slide');
    var nextSlide = currentSlide.next();

    var currentDot = $('.active-dot');
    var nextDot = currentDot.next();

    if(nextSlide.length === 0) {
      nextSlide = $('.slide').first();
      nextDot = $('.dot').first();
    }
    
    currentSlide.fadeOut(600).removeClass('active-slide');
    nextSlide.fadeIn(600).addClass('active-slide');

    currentDot.removeClass('active-dot');
    nextDot.addClass('active-dot');
  });


  $('.arrow-prev').click(function() {
    var currentSlide = $('.active-slide');
    var prevSlide = currentSlide.prev();

    var currentDot = $('.active-dot');
    var prevDot = currentDot.prev();

    if(prevSlide.length === 0) {
      prevSlide = $('.slide').last();
      prevDot = $('.dot').last();
    }
    
    currentSlide.fadeOut(600).removeClass('active-slide');
    prevSlide.fadeIn(600).addClass('active-slide');

    currentDot.removeClass('active-dot');
    prevDot.addClass('active-dot');
  });

}

$(document).ready(main);


Adding Jquery dropdowns to header
#2

Hi @coreslayer87033,

dropdown-toggle and dropdown-menu are classes used by Bootstrap to style the elements. What I'd suggest you do is remove the 2 from the class names in the HTML, then change your JS to look like this:

var main = function() {
  $('.dropdown-toggle').click(function() {
    $(this).next().toggle();
  });

  // ...

#3

Hi again. I am trying to integrate a side-header into my code, and I had
one question:

How could I get this to work?

var main = function() {
$ ('.dropdown-toggle').click(function() {
$(this).next().toggle();

$('.icon-menu').click(function() {
$('.menu').animate({
left: "0px"
}, 200);

$('body').animate({
  left: "285px"
}, 200);

});


#4

This is a throwback to a couple of years ago when this course first emerged. After following the instructions and completing the module I had the same question as you. How to do multiple dropdowns. As it turned out, it was not very difficult once a person has a plan in place.

var int;
function rotate(){
    function next(){
        $('.arrow-next').trigger('click');
    }
    int = self.setInterval(next,5000);
}
function freeze(){
    window.clearInterval(int);
    return false;
}

function arrowNext() {
    var currentSlide = $('.active-slide');
    var nextSlide, nextDot;
    var currentDot = $('.active-dot');
    if ($('.slide').last().hasClass('active-slide')){
        nextSlide = $('.slide').first(); 
        nextDot = $('.dot').first();
    } else { 
        nextSlide = currentSlide.next();
        nextDot = currentDot.next();
    }
    currentSlide.slideUp(600).removeClass('active-slide');
    nextSlide.slideDown(600).addClass('active-slide');
    currentDot.removeClass('active-dot');
    nextDot.addClass('active-dot');
}

function arrowPrev() {
    var currentSlide = $('.active-slide');
    var prevSlide, prevDot;
    var currentDot = $('.active-dot');
    if ($('.slide').first().hasClass('active-slide')){
        prevSlide = $('.slide').last();
        prevDot = $('.dot').last();
    } else { 
        prevSlide = currentSlide.prev();
        prevDot = currentDot.prev();
    }
    currentSlide.slideUp(600).removeClass('active-slide');
    prevSlide.slideDown(600).addClass('active-slide');
    currentDot.removeClass('active-dot');
    prevDot.addClass('active-dot');
}

function dropDown(){
    var currMen = $(this).siblings('.dropdown-menu');
    $('.dropdown-menu').not(currMen).hide();
    currMen.toggle();
}

var main = function(){
  $(document)
    .on('click','.dropdown-toggle',dropDown)
    .on('click','.arrow-next',arrowNext)
    .on('click','.arrow-prev',arrowPrev);
  $('.slider-dots')
    .on('click','.dot',freeze)
    .on('click','.active-dot',rotate);
  rotate();
};

$(main);

As we can see, I cleared all the code out of the main function and only left in the event listeners, which get registered at load time. Everything else is a callback of one form or another.


#5

The HTML includes this code on two menus, Web Tools and More:

          <li class="dropdown">
            <a class="dropdown-toggle">Web Tools <b class="caret"></b></a>
            <ul class="dropdown-menu">
              <li><a href="#">Community</a></li>
              <!-- ... -->
            </ul>
          </li>

Rather than get creative I stole the list from the More menu.


#6

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.