显示/隐藏具有不同类的li元素
显示/隐藏具有不同类的li元素
提问于 2013-12-11 17:40:41
我有一个有子类别的项目列表，没有一个<li>元素有一个类。不是子类别的链接将只是<a>，但是子类别将是<a class="subcategory"> --如果我有这样的内容：
<li>
<a href="/en/explore/in/arts">Arts</a>
</li>
<li>
<a href="/en/explore/in/arts">Paintings</a>
</li>
<li>
<a href="/en/explore/in/arts" class="subcategory">Watercolors</a>
</li>
<li>
<a href="/en/explore/in/arts" class="subcategory">Impressionist</a>
</li>
<li>
<a href="/en/explore/in/arts">Colors</a>
</li>
<li>
<a href="/en/explore/in/arts" class="subcategory">Red</a>
</li>
<li>
<a href="/en/explore/in/arts" class="subcategory">Blue</a>
</li>当“颜色”被涂满时，我能不能只出现红/蓝，绘画也是一样的？尝试使用jquery时，我想出了一段代码，使所有的--子类别--在鼠标点击任何链接时都会显示出来，但这不是我想要的。
编辑:下面是我尝试过的代码(非常简单)：
$('li a').mouseover(function(){ $('li a.subcategory').show();});和
$('li a').mouseleave(function(){ $('li a.subcategory').hide();});在一个单独的列表中把这些子类别放在下一个会更好吗？
回答 4
Stack Overflow用户
回答已采纳
发布于 2013-12-11 17:57:23
已更新
http://jsfiddle.net/W8w7t/1/
$("li").has("a.subcategory").hide();
$("li:not(:has('a.subcategory'))").hover(function () {
$(this).nextUntil("li:not(:has('a.subcategory'))").show();
}, function () {
$(this).nextUntil("li:not(:has('a.subcategory'))").hide();
});
$("li:has('a.subcategory')").hover(function () {
$(this).nextUntil("li:not(:has('a.subcategory'))").andSelf().show();
$(this).prevUntil("li:not(:has('a.subcategory'))").show();
}, function () {
$(this).nextUntil("li:not(:has('a.subcategory'))").andSelf().hide();
$(this).prevUntil("li:not(:has('a.subcategory'))").hide();
});Stack Overflow用户
发布于 2013-12-11 17:49:33
我会把这些子类别放进这个类别中，比如：
<li>
<a href="/en/explore/in/arts">Colors</a>
<ul>
<li>
<a href="/en/explore/in/arts" class="subcategory">Red</a>
</li>
<li>
<a href="/en/explore/in/arts" class="subcategory">Blue</a>
</li>
</ul>
</li>然后，您可以在jquery中使用这样的内容：
$('li').hover(function(){
$(this).children( ".subcategory" ).css( "display", "block" );
});Stack Overflow用户
发布于 2013-12-11 17:50:29
您希望保持相同的类，但是有些类的行为不同--您希望在它们上设置id，并让它们根据mouseOver()上的id执行不同的操作--如果您想使用javascript路由，也可以将它们显示为对象，并使用id来帮助您区分用户正在查看的内容.例如。
变量菜单=
[
{ "id“："1”，"name“："GSXR”}，
{
"id" : "2" ,
"name" : "CBR"
},
{
"id" : "3" ,
"name" : "ZX"
},
{
"id" : "4" ,
"name" : "YZF-R"
},
{
"id" : "5" ,
"name" : "RC-8"
}函数renderMenu()
{ var myUL = document.getElementById('menu')；
var html = '';
for(var i = 0; i < menu.length; i++)
{
html += '<li><a id="'+menu[i].id+'"onclick="display(id)" href="#">'+menu[i].name+'</a></li>';
}
myUL.innerHTML = html;}
当我需要知道用户点击或悬停时，我就是这样构建菜单的.祝你好运！
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/20526188
复制相关文章
相似问题
腾讯云开发者
