.fadeOut 不适用于非常简单的代码

Question

我正在尝试为我正在处理的博客制作一个导航菜单，目前我正在尝试在点击 'Home' 选项卡时其他两个淡出。我不知道为什么这段代码不起作用，因为它是非常简单的几行代码。我不打算在 CSS 中添加，因为我不认为它与这个问题有任何关系。谢谢！

<div id='bckDrp'>
  <div id='nav'>
    <ul id='navLst'>
      <li class='navOp' id='hme'>Home</li>
      <li class='navOp' id='abt'>About</li>
      <li class='navOp' id='prt'>Portfolio</li>
    </ul>
  </div>
</div>

var main = function(){
  $('#hme').click(function(){
    $('#abt, #prt').fadeOut();
  });
}

document.ready(main);

Answer 1

您实际上根本没有调用主函数。

document.ready(main)

应该是JQuery格式：

$(document).ready(main);

Answer 2

您忘记将 document 包裹在 JQuery 对象中：

$(document).ready(main);

Answer 3

改成这样：

$(document).ready(function(){
    main();
})

最终代码：

<!DOCTYPE html>
<html>
<head>
</head>
<body>
   <div id='bckDrp'>
  <div id='nav'>
    <ul id='navLst'>
      <li class='navOp' id='hme'>Home</li>
      <li class='navOp' id='abt'>About</li>
      <li class='navOp' id='prt'>Portfolio</li>
    </ul>
  </div>
</div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script>
var main = function(){
  $('#hme').click(function(){
    $('#abt, #prt').fadeOut();
  });
}
$(document).ready(function(){
    main();
})
    </script>
</body>
</html>

Answer 4

更改document.ready 功能。试试这个：

$(document).ready(function(){
$('#hme').click(function(){
$('#abt, #prt').fadeOut();
});
});

.fadeOut 不适用于非常简单的代码

.fadeOut not working with very simple code

html

javascript

navigation

jquery

fadeout