在html頁面創建切換導航欄

Question

我正在嘗試爲php網站創建一個切換菜單欄。

HTML代碼

<div class="row"> 
    <div class="col-sm-4 col-md-3 sidebar"> 
     <div class="mini-submenu" > 
     <img src="icons/nav_icon.png" height="30" width="30" > 
     </div> 

     <div class="list-group"> 
      <span href="#" class="list-group-item"> 
       Submenu 
       <span class="pull-right" id="slide-submenu"><i class="fa fa-times"></i></span> 
      </span> 
      <a href="#" class="list-group-item"><i class="fa fa-comment-o"></i> Lorem ipsum</a> 
     </div>   
    </div> 
</div> 

腳本代碼

$(function(){ 

    $('#slide-submenu').on('click',function() {     
     $(this).closest('.list-group').fadeOut('slide',function(){ 
      $('.mini-submenu').fadeIn();  
     }); 

     }); 

    $('.mini-submenu').on('click',function(){  
     $(this).next('.list-group').toggle('slide'); 
     $('.mini-submenu').hide(); 
    }) 
}) 

目前的一個，我有工作正常，但問題是，當我第一次打開頁面的子菜單即下nav_bar圖像自動打開，當我點擊十字按鈕時

那麼nav_bar形象出現這樣

，但我想要的是相反的。我希望每當頁面加載時圖像應該首先出現，當我點擊圖像時，子菜單應該出現在它下面。

Answer 1

改變你的腳本

$(function(){ 
$('.list-group').hide(); 
$('.mini-submenu').show(); 

$(function(){ 

    $('#slide-submenu').on('click',function() {     
     $(this).closest('.list-group').fadeOut('slide',function(){ 
      $('.mini-submenu').fadeIn();  
     }); 

     }); 

    $('.mini-submenu').on('click',function(){  
     $(this).next('.list-group').toggle('slide'); 
     $('.mini-submenu').hide(); 
    }) 
}) 
}); 

Answer 2

這將很好地工作：

的JavaScript：

(function($){ 
    $('.list-group').hide(); 
    $('#slide-submenu').on('click',function() {     
    $(this).closest('.list-group').fadeOut('slide',function(){ 
    $('.mini-submenu').fadeIn();  
    }); 

    }); 

$('.mini-submenu').on('click',function(){  
    $(this).next('.list-group').toggle('slide'); 
    $('.mini-submenu').hide(); 
}) 

}）（jQuery的）;