title: How can I change hover to click event?
body: <p>I altered the following code and replaced <code>hover()</code> with <code>on('click',...)</code> and drop <code>stop(true,true)</code>. I also tried with <code>mouseenter()</code>. With <code>hover()</code> it was no issue. How can I add to this to hover event for clicking event and I would like to use hover in <code>mouseout()</code> event. The only caret is working after changing click event.</p>
  
  <p>Menu: </p>
  
  <pre><code>&lt;div id="navbar" class="navbar-collapse collapse"&gt;
      &lt;ul class="nav navbar-nav"&gt;
          &lt;li *ngFor="let item of _profile.menus;" class="dropdown"&gt;&lt;a
              href="#" class="dropdown-toggle" data-toggle="dropdown"     role="button"
              aria-haspopup="true" aria-expanded="true"&gt;{{item.caption}}&lt;b class="caret"&gt;&lt;/b&gt;&lt;/a&gt;
              &lt;ul class="dropdown-menu"&gt;
                  &lt;li&gt;&lt;a (click)="clk()" class="ex1"&gt;{{subitem.caption}}&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>jQuery for hover</p>
  
  <pre><code> jQuery(function(){
      jQuery(".dropdown").hover(            
              function() {
                  jQuery('.dropdown-menu',this).stop( true, true ).fadeIn("fast");
                  jQuery(this).toggleClass('open');
                  jQuery('b',this).toggleClass("caret caret-up");                
              },
              function() {
                  jQuery('.dropdown-menu', this).stop( true, true ).fadeOut("fast");
                  jQuery(this).toggleClass('open');
                  jQuery('b', this).toggleClass("caret caret-up");                
              });
      });
  </code></pre>
  
  <p>Altered jQuery for click</p>
  
  <pre><code>jQuery(function(){
          jQuery(".dropdown").on('click',            
                  function() {
                      jQuery('.dropdown-menu',this).fadeIn("fast");
                      jQuery(this).toggleClass('open');
                      jQuery('b',this).toggleClass("caret caret-up");                
                  },
                  function() {
                      jQuery('.dropdown-menu', this).fadeOut("fast");
                      jQuery(this).toggleClass('open');
                      jQuery('b', this).toggleClass("caret caret-up");                
                  });
          });
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code> a.ex1:hover, a.ex1:active {font-size: 110%;}
  
  .dropdown-menu {
    background-color: #3b5998;
  
    opacity:.3;
    -webkit-transform-origin: top;
    transform-origin: top;
    -webkit-animation-fill-mode: forwards;  
    animation-fill-mode: forwards; 
    -webkit-transform: scale(1, 0);
    transition: all 0.3s linear;
    -webkit-transition: all 0.3s linear;
   }
  
  .dropdown-menu &gt; li &gt; a:hover,
  .dropdown-menu &gt; li &gt; a:focus {
    color: black;
    background-color: #efefef;  
   }
  
  .dropdown-menu &gt; li &gt; a {
    color: white;
    text-decoration: none;
   }
  
  .nav &gt; li &gt; a:hover,
  .nav &gt; li &gt; a:focus{
      color: white;
      text-decoration: none;
      background-color: #5872a7; 
   }
  
  .nav &gt; li &gt;a {
      color: white;
   }
  
  .nav .open&gt;a, .nav .open&gt;a:focus, .nav .open&gt;a:hover {
      background-color: rgba(255, 255, 255, 0.15);
      border-color: #286090;
   }
  
  .navbar-brand, .navbar-nav&gt;li&gt;a {
      text-shadow: 0 0px 0;
      color: #f7fcff;
      text-decoration: none;
  }
  
  .navbar-brand {
      float: left;
      height: 50px;
      padding: 15px 15px;
      font-size: 20px;
      line-height: 20px;
  }
  
  .icon-bar
  {
      display:block;
      width:22px;
      height:2px;
      border-radius:1px;
      border:1px solid white;
  }
  
  .open &gt; .dropdown-menu {
    -webkit-transform: scale(1, 1);
    transform: scale(1, 1);  
    opacity:1;
  }
  
  .caret-up {
      width: 0; 
      height: 0; 
      border-left: 4px solid rgba(0, 0, 0, 0);
      border-right: 4px solid rgba(0, 0, 0, 0);
      border-bottom: 4px solid;
  
      display: inline-block;
      margin-left: 2px;
      vertical-align: middle;
  }
  </code></pre>