Close Bootstrap Dropdown On Container/Body Click

I have added some animation to Bootstrap's drop-down but now the only way to close it is to click the button. Not being very experienced I was hoping for some help, what I want is

Solution 1:

you can achieve this by adding a click function to the body or document and then check the target class or id and based on that you choose what to do, here's a snippet for your case

$(document).click(function (e) {
    var clicked = $(e.target);
    var opened = $(".dropdown-menu").hasClass("expanded");
    if (opened === true && !clicked.hasClass("dropdown-toggle")) {
        $(".dropdown-toggle").click();
    }
});

here's a fiddle: https://jsfiddle.net/9duqrovc/1/

Solution 2:

You should use the following to add your custom CSS class:

$('.dropdown').on('show.bs.dropdown', function (e) {
  // e.relatedTarget is the toggling anchor element
  e.relatedTarget.next().toggleClass('expanded');
})