CODEWITHSUNDEEP
javascriptjqueryhtmlcss
evan
evan

Reputation: 964

Keep Sidebar Open if Clicked in Input Field

When a user clicks on the logo, the sidebar opens; when they click on the menu or body, the sidemenu closes, however there is one exception I'm trying to figure out. If you click in the input field within the sidemenu, the menu closes. I would like the sidemenu to stay open when the user is click in the input field. Below is the jsfiddle and js.

jsFiddle

  $("#menu-close").click(function(e) {
   e.stopPropagation();
   $("#sidebar-wrapper").toggleClass("active");
});

$("#menu-toggle").click(function(e) {
   e.stopPropagation();
   $("#sidebar-wrapper").toggleClass("active");
});

$(document).click(function(){
   if($("#sidebar-wrapper").hasClass('active')){
      $("#sidebar-wrapper").removeClass("active");
   }
});

Upvotes: 1

Views: 1506

Answers (2)

Rakesh Kumar
Rakesh Kumar

Reputation: 2853

Try this.

$("#menu-close").click(function(e) {
   e.stopPropagation();
   $("#sidebar-wrapper").toggleClass("active");
});

// Stop propagation for sidebar-wrapper to stop closing the sidebar panel
$('#sidebar-wrapper').click(function(e){
   e.stopPropagation();
})
$("#menu-toggle").click(function(e) {
    e.stopPropagation();
   $("#sidebar-wrapper").toggleClass("active");
});
$(document).click(function(){
   if($("#sidebar-wrapper").hasClass('active')){
      $("#sidebar-wrapper").removeClass("active");
   }
});

Update Fiddle

Upvotes: 2

James
James

Reputation: 4580

Try this

  $("#menu-close").click(function(e) {
   e.stopPropagation();
   $("#sidebar-wrapper").toggleClass("active");
});
$("#menu-toggle").click(function(e) {
   e.stopPropagation();
   $("#sidebar-wrapper").toggleClass("active");
});
$(document).click(function(e){
   if($('#sidebar-wrapper').has(e.target).length === 0){
       if($("#sidebar-wrapper").hasClass('active')){
          $("#sidebar-wrapper").removeClass("active");
       }
   }
});

DEMO

Upvotes: 2

Related Questions