Question

有人可以帮我解决这个问题吗？

我写代码：

$(document).ready(function() {
    var timer;
    tp = 500;
    cnav = ".categories";
    fsb = "li.submenu_f";
    ssb = "li.submenu_s";
    $(cnav).find("ul li:has(> ul)").addClass("submenu_f");
    $(cnav).find("ul li ul li:has(> ul)").attr("class", "submenu_s");
    $(fsb).hover(function() {
        clearTimeout(timer);
        $(cnav).css("width", "561px");
        $(fsb).find("ul").show();
    }, function() {
        timer = setTimeout(function() {
            $(cnav).css("width", "303px");
            $(fsb).find("ul").hide();
        }, tp);
    });
    $(ssb).hover(function() {
        clearTimeout(timer);
        $(cnav).css("width", "803px");
        $(ssb).find("ul").show();
    }, function() {
        timer = setTimeout(function() {
            $(cnav).css("width", "561px");
            $(ssb).find(ul).hide();
        }, tp);
    });
});

.categories {
    background: #fff;
    position: absolute;
    left: 47px;
    top: 54px;
    width: 303px;
    overflow: hidden;
}

.categories ul li ul {
    position: absolute;
    top: 0;
    left: 274px;
    padding-left: 50px;
    width: 215px;
    height: 100%;
    display: none;
}

.categories ul li ul li ul {
    position: absolute;
    display: inline-block;
    top: 0;
    left: 258px;
    width: 197px;
    display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="categories">
    <ul>
        <li><a href="#" title="">Электроника</a></li>
        <li><a href="#" title="">Бытовая техника</a></li>
        <li><a href="#" title="">Компьютеры</a></li>
        <li><a href="#" title="">Товары для дома</a></li>
        <li><a href="#" title="">Товары для авто</a></li>
        <li><a href="#" title="">Сад и огород</a></li>
        <li><a href="#" title="">Строительство и ремонт</a></li>
        <li>
            <a href="#" title="">Подарки и украшения</a>
            <ul>
                <li><a href="#" title="">Теле-видео-аудио техника</a></li>
                <li><a href="#" title="">Телефоны и связь</a></li>
                <li>
                    <a href="#" title="">Фото и видео</a>
                    <ul>
                        <li><a href="#" title="">Плиты</a></li>
                        <li><a href="#" title="">Вытяжки</a></li>
                        <li><a href="#" title="">Холодильники</a></li>
                        <li><a href="#" title="">Духовые шкафы</a></li>
                        <li><a href="#" title="">Варочные поверхности</a></li>
                        <li><a href="#" title="">Посудомоечные машины</a></li>
                        <li><a href="#" title="">Стиральные машины</a></li>
                        <li><a href="#" title="">Аксессуары</a></li>
                    </ul>
                </li>
                <li><a href="#" title="">Портативная электроника</a></li>
                <li><a href="#" title="">Прочая электроника</a></li>
                <li><a href="#" title="">Элементы питания</a></li>
            </ul>
        </li>
        <li><a href="#" title="">Парфюмерия и косметика</a></li>
        <li><a href="#" title="">Товары для детей</a></li>
        <li>
            <a href="#" title="">Доп. меню</a>
            <ul>
                <li><a href="#" title="">link 1</a></li>
                <li><a href="#" title="">link 2</a></li>
                <li>
                    <a href="#" title="">hover link 3</a>
                    <ul>
                        <li class="title">test</li>
                        <li><a href="#" title="">test link 1</a></li>
                        <li><a href="#" title="">test link 2</a></li>
                    </ul>
                </li>
                <li><a href="#" title="">link 3</a></li>
            </ul>
        </li>
        <li><a href="#" title="">Товары для спорта и отдыха</a></li>
        <li><a href="#" title="">Товары для животных</a></li>
        <li><a href="#" title="">Одежда и обувь</a></li>
        <li><a href="#" title="">Бытовая химия</a></li>
        <li><a href="#" title="">Фермерские товары</a></li>
    </ul>
</div>

或：http://jsfiddle.net/wagwandude/6dWCg/18/

当悬停在li.submenu_f上时，我们会看到ul li ul，当悬停在li.submenu_s上时，我们会看到ul li ul li ul。它工作，但当我再添加1个子菜单 - 我发现问题。菜单叠加在一起..我无法解决这个问题。

Answer 1

首先，func :: Integer -> Integer -> Integer ... pollardStep :: Integer -> Integer -> Integer -> Integer -> Integer -> Integer ... pollard_rho :: Integer -> Integer ...通过课程$(fsb)获取所有内容，因此，.submenu_f代替$(fsb).find("ul").show()和$(fsb).find("ul").hide()，将$(fsb)替换为$(this)，只获得悬停的li。

然后，当您将鼠标悬停在另一个ul li ul上时，您希望隐藏一个li中的li，因此您应该隐藏每个悬停时的所有ul li ul：< / p>

$(fsb).hover(function(){
    $(fsb).find("ul").hide();
    clearTimeout(timer);
    $(cnav).css("width", "561px");
    $(this).find("ul").show();
}, function(){
    timer = setTimeout(function () {
        $(cnav).css("width", "303px");
        $(this).find("ul").hide();
    }, tp);
});  

$(ssb).hover(function(){
    $(ssb).find("ul").hide();
    clearTimeout(timer);
    $(cnav).css("width", "803px");
    $(this).find("ul").show();
}, function(){
    timer = setTimeout(function () {
        $(cnav).css("width", "561px");
        $(this).find("ul").hide();
    }, tp);
});

这是一个工作小提琴：http://jsfiddle.net/4t1u0a2a/2/

如何修复元素的外观？

1 个答案: