javascript - 在悬停子列表上下拉而不扩展 div 的高度

标签 javascript jquery html css

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

1) 我试图让这个列表在悬停时展开。它适用于我的浏览器,但不适用于 jsfiddle。但问题是,当我将鼠标多次移到它上面时,它不会停止扩展和收缩。

2) 如何在列表展开时创建列表,我的 div 会变长,所有内容都在 div 中。我尝试过溢出:隐藏但它不起作用。

3) 我尝试在 CSS 中制作的悬停只是更改主名称的字体颜色,但它会更改整个名称的颜色。

我的 JFiddle http://jsfiddle.net/Y3tc6/1/

JQUERY

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

谢谢

最佳答案

试试这个:

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

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

});

您将不得不进行一些 css 更改。但我认为这将帮助您向下滑动和向上滑动

关于javascript - 在悬停子列表上下拉而不扩展 div 的高度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22474456/

相关文章:

javascript - 此 jQuery 功能的名称

javascript - 获取可拖动后面的每个 div 的 id

javascript - 处理只能同步发生的事件的最佳实践,但其他事情仍然可以异步进行

html - 如何隐藏选择选项的边框

javascript - typeahead bootstrap,当从菜单中选择或聚焦项目并获取值时触发

javascript - 使用 PHP 和 JavaScript 更新 'credits'

javascript - JQuery:查找页面中与给定模式匹配的所有ID

javascript - 使用 jquery 获取动态创建的元素的内容

javascript - 如何使用下拉列表使单个 HTML 页面为主题选择不同的 CSS 样式表

html - 当所有子项都有 flex 属性时,父项的 justify-content 是否重要?