当页面处于活动状态时，隐藏列表显示为隐藏状态

有一天，我希望不要成为这种东西的新手，但有些时候这种感觉有时候是如此不可逾越的！当页面处于活动状态时，隐藏列表显示为隐藏状态

好的。我有一个隐藏的li项目的导航栏，在悬停时可见。

下面是资产净值代码：

<ul id="navbar"> 
    <li id="iex"><a href="index.php">About Rattletree</a></li> 
    <li id="upcomgshows"><a href="upcomingshows.php">Calendar</a></li> 
    <li id="sods"><a href="#">Sights &amp; Sounds</a> 
    <ul class="innerlist"> 
     <li class="innerlist"><img class="arrowAdjust" src="images/curved_arrow.png" alt="" /></li> 
     <li class="innerlist"><a href="/playlist.m3u" target="_blank" onclick="javascript:BatmoAudioPop('Rattletree Marimba',this.href,'1'); return false">Listen</a></li> 
     <li class="innerlist"><a href="/new_pictures.php">Photos</a></li> 
     <li class="innerlist"><a href="/video.php">Video</a></li> 
    <li class="innerlist"><a href="/press.php">Press</a></li> 
    </ul> 
    </li> 
    <li id="bookin"><a href="#">Contact</a> 
    <ul class="innerlist"> 
      <li class="innerlist"><img class="arrowAdjust" src="images/curved_arrow.png" alt="" /></li> 
      <li class="innerlist"><a href="/booking.php">Booking Info</a></li> 
      <li class="innerlist"><a href="/media.php">Media Inquiries</a></li> 
    </ul> 
    </li> 
    <li id="ste"> <a href="/sounds.php">Store</a></li> 
    <li id="instrumes"><a href="/instruments.php">The Instruments</a></li> 
    <li id="classe"><a href="classes.php">Workshops</a></li> 
</ul>

CSS：

div#navbar2 { 
background-color:#546F8B; 
border-bottom:1px solid #546F8B; 
border-top:1px solid #000000; 
display:inline-block; 
position:relative; 
width:100%; 
} 
div#navbar2 ul#navbar { 
color:#FFFFFF; 
font-family:Arial,Helvetica,sans-serif; 
font-size:16px; 
letter-spacing:1px; 
margin:10px 0; 
padding:0; 
white-space:nowrap; 
} 

div#navbar2 ul#navbar li ul.innerlist { 
color:#000000; 
display:none; 
position:relative; 
z-index:20; 
} 

div#navbar2 ul#navbar li { 
display:inline; 
list-style-type:none; 
margin:0; 
padding:0; 
position:relative; 
}

现在是有点棘手了我想做的事：如果用户导航到其中一个内部列表页面，我希望内部列表ul保持可见（使用特定的li显示hovere d状态）。

现在我想我可以自己解决这个问题，但是您可以在实时页面上看到，如果用户位于内部列表的页面上，并且该列表可见，那么如果它们悬停在其他导航标签上，那么这些内部列表就会重叠。这是个问题。

希望最后一句话是有道理的！

总之：我需要保持活动页面的内部列表显示，但如果用户将鼠标悬停在另一个导航按钮上，并且它拥有自己的内部列表，那么活动内部列表需要消失。

清澈如泥？

来源

2010-05-08 Joel

您将需要使用Javascript来处理这个问题。您将无法完全使用CSS完成此操作。

你会想要做的是创建一个Javascript函数，它将在ul＃navbar的任何元素的“mouseover”事件中被触发。这个函数会让所有显示的内部列表被隐藏，并显示该菜单元素的正确内部列表。

来源

2010-05-08 05:41:45

我建议jQuery，因为它给你一个完整的工具集这种事情。但基本上让我们假设你有上面声明的css。

$("ul#navbar li ul.innerlist").show()

或

$("ul#navbar li ul.innerlist").hide()

这些都将允许你控制你的可见性状态。从How to get the children of the $(this) selector?

来源

2010-05-08 05:54:01 Gabriel

$("div#navbar2 ul#navbar li").hover(function() { 
    $("ul", this).show(); 
});

对于某些输入我建议如下：您绑定这些父母。在您显示的页面上，给予班级active。

使用jQuery

然后，请执行以下操作：

$('li.active > ul').show();

而且，你要取消，李盘旋的可能性，因为如果不这样做，每当有人在徘徊，子菜单将用户悬停后隐藏。

所以，

$('li.active').hover(function() { 
    $('li.active > ul').show(); 
});

这应该照顾它，我认为。

祝你好运。

来源

2010-09-05 23:04:52 Amit

也可以用CSS做而已，请参见：http://aext.net/2009/12/incredible-drop-down-menu-solution-with-css-only/

要小心，你可以运行到上大网站的性能有问题：悬停的元素，这是在IE -.-

NOCH锚
为IE客户端避免使用：hover伪选择器，用于非链接元素。如果您使用：悬停在非锚点元素上，测试IE7和IE8中的页面为确定您的页面可用。如果您发现：悬停导致性能问题，请考虑有条件地使用JavaScript onmouseover事件处理程序为IE 客户端。

- >http://code.google.com/intl/de-DE/speed/page-speed/docs/rendering.html

来源

2010-10-10 14:01:51 shapeshifta

当页面处于活动状态时，隐藏列表显示为隐藏状态

回答

相关问题