jquery 引入外部JS失效

以前写JS习惯将JS代码直接写在页面中，工作后需要做到分离，JS单独写在一个文件中，但是用的时候掉进了坑里

原来是我的javascript里面，有直接操作页面元素的代码，所以不能在head里面引用 ，而应该放到body内引用。

下面是部分自己写的opIndex.js的代码

$(function () {
    var qsSystem = ["考勤记录", "请假申请", "请假记录", "加班申请", "加班记录", "出差申请", "出差记录", "我的假期"];
    for (var i = 0; i < qsSystem.length; i++) {
      $(".kq-sys").append("<dd><a href='javascript:;'>" + qsSystem[i] + "</a></dd>");
    }  //根据后台传递的信息进行前台子选项的填充

    $("dd").css("padding-left", "10px");  //设置各选项左侧填充区域
    $(".layui-nav .layui-nav-item").click(function () { //右侧选项框点击事件开始
      $(this).siblings(".layui-nav-itemed").removeClass("layui-nav-itemed"); //将展开的关闭
      $(this).addClass("layui-nav-itemed"); //将点击的展开
    });

下面是引入opIndex.js的写法 

  <script src="../layui/layui.js" type="text/javascript"></script>
  <script src="../js/jquery-3.3.1.min.js"></script>
  <script src="../js/officePlatform/opIndex.js"></script>
  <script>
    //JavaScript代码区域
    layui.use('element', function () {
      var element = layui.element;
    });
  </script>
</body>
</html>