Question

请指导我，因为我正在努力学习。

1）我试图让这个列表在悬停时展开。它适用于我的浏览器，但不适用于jsfiddle。但问题是，当我将鼠标移动几次时，它不会停止扩展和缩小。

2）如何在列表扩展时制作列表，我的div会变长，所有内容都会留在div中。我试过溢出：隐藏但它不起作用。

3）我尝试在CSS中进行的悬停只是改变主名称的字体颜色，但它改变了整个名称的颜色。

THE JQUERY

$(".subli").hide();
$(".mainli").on("click", function (e) {
    e.preventDefault();
    $(this).find(".subli").slideToggle();
});

谢谢

Answer 1

2）如何在列表扩展时制作列表，我的div会变长，所有内容都会留在div中。我试过溢出：隐藏但它不起作用。

#droplist {
    display:block;
    max-height:212px;
    width:250px;
    background-color:grey;
    overflow:auto;
}

3）我尝试在CSS中进行的悬停只是改变主名称的字体颜色，但它改变了整个名称的颜色。

#droplist > ul > li:hover {
    color:red;
}

#droplist li ul {
    color:#000;
}

JSFiddle http://jsfiddle.net/Y3tc6/4/

有关CSS上>的更多信息。

CSS '>' selector; what is it?

对不起，如果它很乱，请在第3号。

我上次编辑！ XD

Answer 2

试试这个：

$(".mainli").on("mouseover", function (e) {
    $(this).find(".subli").slideDown();

});
$(".mainli").on("mouseout", function (e) {
    $(this).find(".subli").slideUp();

});

您必须进行一些css更改。但我认为这将帮助您向下滑动并向上滑动

Answer 3

1）使用mouseenter和mouseleave

$(".subli").hide();

$(".mainli").mouseenter(function (e) {
    $(this).find(".subli").slideDown();
});

$(".mainli").mouseleave(function (e) {
    $(this).find(".subli").slideUp();
});

2＆amp; 3）你需要在CSS中更具体地使颜色正确，并使用block，max-height和overflow来使div的高度保持不变

#droplist {
    display:block;
    max-height:250px;
    height:250px;
    width:250px;
    background-color:grey;
    overflow: hidden;
}

#droplist .mainli:hover li {
    color:initial;
}

#droplist .mainli:hover,
#droplist .mainli li:hover {
    color:red;
}

<强> Working demo

Answer 4

试试这个：

$(".subli").hide();
$(".mainli").hover( function (e) {
    e.preventDefault();
    $(this).find(".subli").stop(true).slideToggle();
}

);

在Hover子列表中下拉而不扩展div的高度

4 个答案: