Question

我有一个包含子类别的项目列表，<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();});

在单独的列表中接下来的子类别会更好吗？

Answer 1

已更新

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

Answer 2

我会将子类别放在类别中，如下所示：

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

Answer 3

你想要保持相同的课程，但有一些表现不同 - 你想要在它们上设置id并让它们根据id开启不同的行为 mouseOver()如果您想要使用javascript路线，您还可以将其显示为对象并使用ID来帮助您区分用户正在查看的内容...

var menu =

[

{ “id”：“1”， “名字”：“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;

}

当我需要知道用户点击或悬停时，这就是我如何建立菜单... 祝你好运！

Answer 4

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

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

jsFiddle Demo

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

Answer 5

我会添加一个额外的类来识别该项目属于哪个类别，并使用与数据相关的控制它，如下所示：

DEMO

<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>

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

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

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

5 个答案:

已更新