Я использую jquery next и cosest параметры, чтобы выбрать только один элемент, но это применяет классы к каждому элементу

Question

Я использую jquery next и cosest параметры, чтобы выбрать только один элемент, но это применяет классы к каждому элементу

0

Мое меню в формате HTML

<div style="margin-top: 200px; width: 140px; text-align: left; line-height: 20px;">
    <div class="lmenu">Home</div>
    <div class="lmenu">About Us</div>
    <div class="lmenu parent">Our Services
        <div class="subparent">
            Event Management
                <div class="child">
                Categories
                </div>
                <div class="child">
                Providing Facilities
                </div>
        </div>
        <div class="subparent">
            Rental
            <div class="child">
                AVEquipments
            </div>
            <div class="child">
                Other Services
            </div>
        </div>
        <div class="subparent">
            Exhibition Stalls 
            <div class="child">
                Standard Stall
            </div>
            <div class="child">
                Designed Stalls
            </div>
        </div>
    </div>
    <div class="lmenu parent">About Us
        <div class="subparent">
            Our Company
            <div class="child">
                Categories
            </div>
            <div class="child">
                Our Team
            </div>
        </div>
    </div>
</div>

и я использую функции jQuery для mouseover и mouseout для просмотра дополнительных элементов. но когда я нахожу только один пункт меню, каждое подменю будет видимым.

вот мой jquery

var $sub_itmes;
$(".parent").on({
    mouseover: function() {
        $sub_itmes = $(".lmenu").next().find(".subperent");
        $sub_itmes.css({
            "display": "block",
        });
        $sub_itmes.animate({
            "opacity": 1
        });
    },
    mouseleave: function() {
        $sub_itmes = $(".lmenu").next().find(".subperent");
        $sub_itmes.css({
            "display": "none",
        });
        $sub_itmes.animate({
            "opacity": 0
        });
    }
});

$(".subperent").on({
    mouseover: function() {
        $sub_itmes = $(this).closest('.lmenu').find(".chilld");
        $sub_itmes.css({
            "display": "block",
        });
        $sub_itmes.animate({
            "opacity": 1
        });
    },
    mouseleave: function() {
        $sub_itmes = $(this).closest('.lmenu').find(".chilld");
        $sub_itmes.css({
            "display": "none",
        });
        $sub_itmes.animate({
            "opacity": 0
        });
    }
});

Я не могу найти, где я ошибаюсь.

Спасибо.

Yasitha 11 май 2014, в 11:16

Источник

Теги:

javascript

jquery

html

css

1 ответ

Ещё вопросы

AbstractChaos · Accepted Answer · 2014-05-11T05-47-00.000Z

ваша находка делала это

из текущего элемента find .lmenu (который является родительским)
теперь найдите все.chilld внутри верхнего родителя (который найдет все)
показать/скрыть их

Используя синтаксис $(query,scope) вы можете найти элемент, который находится в текущем выборе.

var $sub_itmes;
$(".parent").on({
    mouseover: function() {
        $sub_itmes = $('.subperent',this);
        $sub_itmes.fadeIn('slow');
    },
    mouseleave: function() {
        $sub_itmes = $('.subperent',this);
        $sub_itmes.fadeOut('slow');
    }
});

$(".subperent").on({
    mouseover: function() {
        $sub_itmes = $('.chilld',this);
        $sub_itmes.fadeIn('slow');
    },
    mouseleave: function() {
        $sub_itmes = $('.chilld',this);
        $sub_itmes.fadeOut('slow');
    }
});

играть на скрипке

На боковой ноте взгляните на плагин hoverIntent, он будет игнорировать быструю мышь, но активируется только тогда, когда кажется, что пользователь хочет это сделать.

Спасибо, сэр. это хорошо работает