dropdown-toggle is not working properly when clicked

Question

I have searched all the answers given before, but didn't find any solution of my problem.

Problem is, I am using drop down menu. I want to open sub menu when it is clicked.

I have written following code.

    <div class="container-fluid" id="main-container">
        <div id="sidebar" class="nav-collapse">
            <ul class="nav nav-list">
              <li>
                    <a href="#" class="dropdown-toggle" >
                        <i class="icon-edit"></i>
                        <span>Edit Profile</span>
                        <b class="arrow icon-angle-right"></b></a>                    
                    <ul class="submenu">
                        <li><a href="#">Edit Presonal Details</a></li>
                        <li><a href="#">Change Password</a></li>
                    </ul>
              </li>
            <div id="sidebar-collapse" class="visible-desktop">
                <i class="icon-double-angle-left"></i>
            </div>
        </div>
    </div>

Flaty.js have following code:

$('#sidebar a.dropdown-toggle').click(function () {
    alert("clicked");
    var submenu = $(this).next('.submenu');
    var arrow = $(this).children('.arrow');
    if (arrow.hasClass('icon-angle-right')) {
        arrow.addClass('anim-turn90');
    }
    else {
        arrow.addClass('anim-turn-90');
    }
    submenu.slideToggle(400, function(){
        if($(this).is(":hidden")) {
            arrow.attr('class', 'arrow icon-angle-right');
            $("#sidebar.sidebar-fixed .nav").getNiceScroll().resize();
        } else {
            arrow.attr('class', 'arrow icon-angle-down');
            scrollableSidebar();
        }
        arrow.removeClass('anim-turn90').removeClass('anim-turn-90');
    });
});

Css for this:

.dropup .caret,
      .navbar-fixed-bottom .dropdown .caret {
  border-top: 0;
  border-bottom: 4px solid #000000;
  content: "";
}

.dropup .dropdown-menu,
.navbar-fixed-bottom .dropdown .dropdown-menu {
  top: auto;
  bottom: 100%;
  margin-bottom: 1px;
}

.dropdown-submenu {
  position: relative;
}

.dropdown-submenu > .dropdown-menu {
  top: 0;
  left: 100%;
  margin-top: -6px;
  margin-left: -1px;
  -webkit-border-radius: 0 6px 6px 6px;
     -moz-border-radius: 0 6px 6px 6px;
          border-radius: 0 6px 6px 6px;
}

.dropdown-submenu:hover > .dropdown-menu {
  display: block;
}

.dropup .dropdown-submenu > .dropdown-menu {
  top: auto;
  bottom: 0;
  margin-top: 0;
  margin-bottom: -2px;
  -webkit-border-radius: 5px 5px 5px 0;
     -moz-border-radius: 5px 5px 5px 0;
          border-radius: 5px 5px 5px 0;
}

.dropdown-submenu > a:after {
  display: block;
  float: right;
  width: 0;
  height: 0;
  margin-top: 5px;
  margin-right: -10px;
  border-color: transparent;
  border-left-color: #cccccc;
  border-style: solid;
  border-width: 5px 0 5px 5px;
  content: " ";
}

.dropdown-submenu:hover > a:after {
  border-left-color: #ffffff;
}

.dropdown-submenu.pull-left {
  float: none;
}

.dropdown-submenu.pull-left > .dropdown-menu {
  left: -100%;
  margin-left: 10px;
  -webkit-border-radius: 6px 0 6px 6px;
     -moz-border-radius: 6px 0 6px 6px;
          border-radius: 6px 0 6px 6px;
}

.dropdown .dropdown-menu .nav-header {
  padding-right: 20px;
  padding-left: 20px;
}

There is also a button at the end of side bar to hide and show. It also doesn't work.

Answer 1

This code is not working :

if($(this).is(":hidden")) {
        arrow.attr('class', 'arrow icon-angle-right');
        $("#sidebar.sidebar-fixed .nav").getNiceScroll().resize();
    } else {
        arrow.attr('class', 'arrow icon-angle-down');
        scrollableSidebar();
    }
    arrow.removeClass('anim-turn90').removeClass('anim-turn-90');

And we don't have these function in your code. But when removed everything work. Take a look at this : http://jsfiddle.net/j6jtd7fj/