显示/隐藏具有不同类的li元素

更新

DEMO

$("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();
});

我会把子类别放在类别中，类似这样：

<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" );
});

如果您希望保留相同的类，但有些类的行为不同-你会想在他们身上设置id，并让他们根据id采取不同的行动mouseOver（）如果你想使用javascript路由，你也可以将它们显示为对象，并使用那里的id来帮助你区分用户正在查看的内容。。。示例

var菜单=

[

{"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;

}

当我需要知道用户点击或悬停时，我就是这样构建菜单的。。。祝你好运

如果您能够修改每个li元素的属性，我建议如下：

• 为标题分配一个适当的ID（例如，绘画=id="paintings"）
• 为副标题指定相同的名称，作为一个类（例如class="paintings"）
• 使用jQuery切换可见性

jsFiddle演示

HTML:

<li><a href="/en/explore/in/arts">Arts</a></li>
<li id="paintings"><a href="/en/explore/in/arts">Paintings</a></li>
<li class="paintings"><a href="/en/explore/in/arts" class="subcategory">Watercolors</a></li>
<li class="paintings"><a href="/en/explore/in/arts" class="subcategory">Impressionist</a></li>
<li id="colors"><a href="/en/explore/in/arts">Colors</a></li>
<li class="colors"><a href="/en/explore/in/arts" class="subcategory">Red</a></li>
<li class="colors"><a href="/en/explore/in/arts" class="subcategory">Blue</a></li>

javascript/jQuery:

var xid;
$('#paintings').hover(
    function() {
        $('.colors').hide();
        xid = $(this).attr('id');
        $('.'+xid).show();
    }
);
$('#colors').hover(
    function() {
        $('.paintings').hide();
        xid = $(this).attr('id');
        $('.'+xid).show();
    }
);
$('li').mouseover(function(e) {
    if ($(this).attr('id') == undefined){
        $('.paintings').hide();
        $('.colors').hide();
    }
});

我会添加一个额外的类来识别物品属于哪个类别，并使用相关的数据来控制它，类似于这样：

演示

<li>
<a href="/en/explore/in/arts">Arts</a>
</li>
<li>
  <a href="/en/explore/in/arts" data-related="paitings">Paintings</a>
</li>
<li>
  <a href="/en/explore/in/arts" class="subcategory paitings">Watercolors</a>
</li>
<li>
  <a href="/en/explore/in/arts" class="subcategory paitings">Impressionist</a>
</li>
<li>
  <a href="/en/explore/in/arts" data-related="colors">Colors</a>
</li>
<li>
  <a href="/en/explore/in/arts" class="subcategory colors">Red</a>
</li>
<li>
  <a href="/en/explore/in/arts" class="subcategory colors">Blue</a>
</li>

然后我会隐藏所有的子类别，并在悬停显示上只显示那些与数据相关的中悬停链接具有相同类的子类别

$(function(){    
    //Hide all of the subcategories
    $(".subcategory").parent("li").hide();
    //Assign hover event only to the links that don't have a class
    $("li a").not("[class]").hover(function(){
        $("." + $(this).data("related")).parent("li").show();
    });
});