Boostrap側切換菜單，點擊關閉

Question

我想用https://startbootstrap.com/template-overviews/simple-sidebar/添加側菜單到我的網站，但我想添加功能，當點擊了菜單將被關閉。這裏是我的代碼

<script> 
    jQuery(document).ready(function($) { 
    $("#menu-toggle").click(function(e) { 
     e.preventDefault(); 
     $("#wrapper").toggleClass("toggled"); 

    $("#page-content-wrapper").click(function(ev){ 
     ev.preventDefault(); 
     $("#menu-toggle").click(); 
     $(this).off(ev); 
     }); 

    }); 


      }); 
    </script> 

，並嘗試做這樣

<script> 
    jQuery(document).ready(function($) { 
    $("#menu-toggle").click(function(e) { 
     e.preventDefault(); 
     $("#wrapper").toggleClass("toggled"); 

    $("#page-content-wrapper").click(function(ev){ 
     ev.preventDefault(); 
     $(this).off(ev); 
     console.log($("#wrapper")); 
     if($("#wrapper").hasClass('.toggled')) { 
      $("#menu-toggle").click(); 
     } 

     }); 

    }); 


      }); 
    </script> 

但無論方式顯示結果我想

Answer 1

您可以使用下面的代碼塊實現確保您Body或Wrapper的高度是100%，使其工作，否則它不會觸發任何點擊事件。

你只綁定在Body或父母Div點擊事件，並在檢查點擊的元素不是菜單sidebar-wrapper和的toogle按鈕menu-toggle的ID。

$('#wrapper').click(function(evt){ 
     if(evt.target.id == "sidebar-wrapper" || evt.target.id == "menu-toggle") 
      return false; 
     $("#menu-toggle").click();  


}); 

UPDATE

查找更新片段

/* Latest compiled and minified JavaScript included as External Resource */ jQuery(document).ready(function($) { 
 
    $("#menu-toggle").click(function(e) { 
 
     e.preventDefault(); 
 
     $("#wrapper").toggleClass("toggled"); 
 
        
 
    }); 
 
    
 
    $('#wrapper').click(function(evt){ 
 
     if(evt.target.id == "sidebar-wrapper" || evt.target.id == "menu-toggle") 
 
      return false; 
 
     $("#wrapper").removeClass("toggled"); 
 

 

 
    }); 
 
    
 

 
    
 
     
 
    
 
    
 
      });

/*! 
 
* Start Bootstrap - Simple Sidebar (http://startbootstrap.com/) 
 
* Copyright 2013-2016 Start Bootstrap 
 
* Licensed under MIT (https://github.com/BlackrockDigital/startbootstrap/blob/gh-pages/LICENSE) 
 
*/ 
 

 
body { 
 
    overflow-x: hidden; 
 
} 
 

 
/* Toggle Styles */ 
 

 
#wrapper { 
 
    padding-left: 0; 
 
    -webkit-transition: all 0.5s ease; 
 
    -moz-transition: all 0.5s ease; 
 
    -o-transition: all 0.5s ease; 
 
    transition: all 0.5s ease; 
 
} 
 

 
#wrapper.toggled { 
 
    padding-left: 250px; 
 
} 
 

 
#sidebar-wrapper { 
 
    z-index: 1000; 
 
    position: fixed; 
 
    left: 250px; 
 
    width: 0; 
 
    height: 100%; 
 
    margin-left: -250px; 
 
    overflow-y: auto; 
 
    background: #000; 
 
    -webkit-transition: all 0.5s ease; 
 
    -moz-transition: all 0.5s ease; 
 
    -o-transition: all 0.5s ease; 
 
    transition: all 0.5s ease; 
 
} 
 

 
#wrapper.toggled #sidebar-wrapper { 
 
    width: 250px; 
 
} 
 

 
#page-content-wrapper { 
 
    width: 100%; 
 
    position: absolute; 
 
    padding: 15px; 
 
} 
 

 
#wrapper.toggled #page-content-wrapper { 
 
    position: absolute; 
 
    margin-right: -250px; 
 
} 
 

 
/* Sidebar Styles */ 
 

 
.sidebar-nav { 
 
    position: absolute; 
 
    top: 0; 
 
    width: 250px; 
 
    margin: 0; 
 
    padding: 0; 
 
    list-style: none; 
 
} 
 

 
.sidebar-nav li { 
 
    text-indent: 20px; 
 
    line-height: 40px; 
 
} 
 

 
.sidebar-nav li a { 
 
    display: block; 
 
    text-decoration: none; 
 
    color: #999999; 
 
} 
 

 
.sidebar-nav li a:hover { 
 
    text-decoration: none; 
 
    color: #fff; 
 
    background: rgba(255,255,255,0.2); 
 
} 
 

 
.sidebar-nav li a:active, 
 
.sidebar-nav li a:focus { 
 
    text-decoration: none; 
 
} 
 

 
.sidebar-nav > .sidebar-brand { 
 
    height: 65px; 
 
    font-size: 18px; 
 
    line-height: 60px; 
 
} 
 

 
.sidebar-nav > .sidebar-brand a { 
 
    color: #999999; 
 
} 
 

 
.sidebar-nav > .sidebar-brand a:hover { 
 
    color: #fff; 
 
    background: none; 
 
} 
 

 
@media(min-width:768px) { 
 
    #wrapper { 
 
     padding-left: 0; 
 
    } 
 

 
    #wrapper.toggled { 
 
     padding-left: 250px; 
 
    } 
 

 
    #sidebar-wrapper { 
 
     width: 0; 
 
    } 
 

 
    #wrapper.toggled #sidebar-wrapper { 
 
     width: 250px; 
 
    } 
 

 
    #page-content-wrapper { 
 
     padding: 20px; 
 
     position: relative; 
 
    } 
 

 
    #wrapper.toggled #page-content-wrapper { 
 
     position: relative; 
 
     margin-right: 0; 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> 
 
<body> 
 

 
    <div id="wrapper"> 
 

 
     <!-- Sidebar --> 
 
     <div id="sidebar-wrapper"> 
 
      <ul class="sidebar-nav"> 
 
       <li class="sidebar-brand"> 
 
        <a href="#"> 
 
         Start Bootstrap 
 
        </a> 
 
       </li> 
 
       <li> 
 
        <a href="#">Dashboard</a> 
 
       </li> 
 
       <li> 
 
        <a href="#">Shortcuts</a> 
 
       </li> 
 
       <li> 
 
        <a href="#">Overview</a> 
 
       </li> 
 
       <li> 
 
        <a href="#">Events</a> 
 
       </li> 
 
       <li> 
 
        <a href="#">About</a> 
 
       </li> 
 
       <li> 
 
        <a href="#">Services</a> 
 
       </li> 
 
       <li> 
 
        <a href="#">Contact</a> 
 
       </li> 
 
      </ul> 
 
     </div> 
 
     <!-- /#sidebar-wrapper --> 
 

 
     <!-- Page Content --> 
 
     <div id="page-content-wrapper"> 
 
      <div class="container-fluid"> 
 
       <div class="row"> 
 
        <div class="col-lg-12"> 
 
         <h1>Simple Sidebar</h1> 
 
         <p>This template has a responsive menu toggling system. The menu will appear collapsed on smaller screens, and will appear non-collapsed on larger screens. When toggled using the button below, the menu will appear/disappear. On small screens, the page content will be pushed off canvas.</p> 
 
         <p>Make sure to keep all page content within the <code>#page-content-wrapper</code>.</p> 
 
         <a href="#menu-toggle" class="btn btn-default" id="menu-toggle">Toggle Menu</a> 
 
        </div> 
 
       </div> 
 
      </div> 
 
     </div> 
 
     <!-- /#page-content-wrapper --> 
 

 
    </div>

Answer 2

試試這個..任何你在它檢查文檔單擊您是否被點擊在側邊欄菜單中..

jQuery(document).ready(function($) { 
    $("#menu-toggle").click(function(e) { 
     e.preventDefault(); 
     e.stopPropagation(); 
     $("#wrapper").toggleClass("toggled"); 
    }); 
    $(document).click(function(e) { 
     if ($(e.target).closest('#sidebar-wrapper').length === 0) { 
      $("#wrapper").removeClass("toggled"); 
     } 
    }); 
}); 

https://jsfiddle.net/nLar6v3f/3/

Answer 3

這是你的代碼，現在檢查，其已工作的罰款

<script> 
    jQuery(document).ready(function($) { 
    $("#menu-toggle").click(function(e) { 
     e.preventDefault(); 
     $("#wrapper").toggleClass("toggled"); 

    $("#page-content-wrapper").click(function(ev){ 
     ev.preventDefault(); 
     $(this).off(ev); 
     console.log($("#wrapper")); 
     if($("#wrapper").hasClass('toggled')) {// change the line [$("#wrapper").hasClass('.toggled') ] 
      $("#menu-toggle").click(); 
     } 

     }); 

    }); 


      }); 
    </script>