Javascript 如何淡出除此活动选项卡之外的所有正文/文档？_Javascript_Jquery

Javascript 如何淡出除此活动选项卡之外的所有正文/文档？

javascript jquery

Javascript 如何淡出除此活动选项卡之外的所有正文/文档？,javascript,jquery,Javascript,Jquery,我有一个简单的下拉导航。在这种情况下，当列表项悬停时，如何使整个文档淡入淡出，但仍保持列表项及其子项完全不透明度我可以在这个简单的代码中添加什么 $("#menu > li:has(ul)").hover(function(){ $(this).find('ul:first').css({visibility: "visible",display: "none"}).show(); },function(){ $(this).find('ul:first'

我有一个简单的下拉导航。在这种情况下，当列表项悬停时，如何使整个文档淡入淡出，但仍保持列表项及其子项完全不透明度

我可以在这个简单的代码中添加什么

$("#menu > li:has(ul)").hover(function(){
        $(this).find('ul:first').css({visibility: "visible",display: "none"}).show();
},function(){
        $(this).find('ul:first').css({visibility: "hidden"});
});

当你淡出某样东西时，它的所有子元素也会淡出，因此你不能按照你要求的方式来做，即淡出身体，因为身体中包含的一切都会淡出

通常的方法是创建一个覆盖

div

，该覆盖与当前窗口大小相同，但小于要保持高亮显示的元素的

z-index

（扩展后也高于文档的其余部分）

如果对该div应用不透明度，则隐藏在其下的所有内容都将淡出

e、 g.（源自jqueryui的样式表）：

您应该首先选择所有容器元素，但导航位于其中的元素除外。使用作为主体元素的直接后代的元素。不要选择主体元素本身

无论如何，如果您使用列表进行导航，则必须保持整个菜单不透明，否则将无法执行此操作

为了尽可能简单快捷，请尽量使菜单列表尽可能靠近body元素（理想情况是body的子元素，无需任何进一步的包装元素）

为任何元素提供一个id或至少一个类（以便于选择）

然后，选择菜单中的所有同级元素

然后把它们淡出

以下是一个例子：

让我们看看这一页：

<body>
   <div id="header">This is a page head (logo, some widgets, slider, etc)</div>
   <div id="menuContainer">
      <ul id="menu">
         <li>menuitem</li>
         <li>menuitem</li>
         <li>menuitem</li>
         <li>menuitem</li>
         // .... as many items and levels you wish
      </ul>
   </div>
   <div id="contentContainer">
      you should have here the main content, sidebar, more widgets, whatever you like
   </div>
   <div id="footer">
      <div id="footer-1">
      </div>
      <div id="footer-2">
      </div>
   </div>
</body>

要在可见状态下恢复元素，请执行以下操作：

$('body *').fadeIn(); // or show();

// recursive function for climbing in any multi level menu and hiding anything except the parents of our particular menu item. Anything below our menu item (it's children) are out of our scope, we won't have anything to do to them.
function fadeParents(item){
   var tmpParentUl = item.parents('ul')[0];
   var tmpParentUlLi = $(tmpParentUl).parents(li)[0];
   if (tmpParentUlLi){
     $(tmpParentUlLi).siblings('li').fadeOut();
     fadeParents($(tmpParentUlLi));
   }
}

$("#menu > li:has(ul)").hover(function(){
  // you may put all the elements in the same selection, i broke them apart just for the sake of this example
  // select all wrapper divs, except the one the menu is inside of and fade them out
  $("#header, #contentContainer, #footer").fadeOut(); // if you don't wish to animate, just hide();
  $(this).siblings('li').fadeOut();
  fadeParents($(this));
});

$('body *').fadeIn(); // or show();