在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的）;