Question

我有一个简单的下拉导航。如果在这种情况下悬停列表项但是仍保留列表项并且它是完全不透明的子项，我如何淡化整个文档？

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

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

Answer 1

通常的方法是创建一个与当前窗口大小相同的叠加层div，但要比要保持高亮显示的元素低z-index（并且扩展名也高于文件的其余部分）。

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

e.g。（从jQuery UI的样式表派生而来）：

.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0.8;
    filter: Alpha(Opacity=80); // for MSIE
}

Answer 2

当你淡出一些东西时，它的子元素也逐渐淡出，所以你不能按照你要求的方式去做，即淡出身体，因为身体里的所有东西都会逐渐消失！

Answer 3

您应首先选择所有容器元素，但导航所在的容器元素除外。使用作为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>

现在是jquery部分（代码可能包含错误，它没有经过测试，它只显示，应该做什么 - 当然，它可能很慢，取决于你有多少嵌套元素）：< / p>

// 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();

如何淡化除此活动标签之外的所有正文/文档？

3 个答案: