Выделите элемент списка, не выделяя его дочерние элементы (еще один UL) в jQuery - PullRequest
Новая
       34

Выделите элемент списка, не выделяя его дочерние элементы (еще один UL) в jQuery

1 голос
/ 17 февраля 2011

Я пытаюсь применить эффект наведения к UL, но UL, являющийся дочерним элементом одного элемента списка, также получает эффект, который мне не нужен.Я пробовал все виды вещей, например, используя знак> и селектор .not (), но без успеха.

Вот мой (упрощенный) HTML: 

        <ul id="menu">
            <li class="menubox"><a href="#">Home</a></li>
            <li class="menubox"><a href="#">Over Ons</a></li>
            <li class="menubox"><a href="#" id="varianten">Producten</a>
                <ul id="menu_varianten">
                    <li><a href="#">1</a></li>
                    <li><a href="#">2</a></li>
                    <li><a href="#">3</a></li>
                </ul>
            </li>
            <li class="menubox"><a href="#">Forum</a></li>
        </ul>

Некоторые фрагментыCSS, который может иметь отношение: 

#menu {
position: relative;
width: 250px;
}

ul#menu{
list-style: none;
margin-left: 0;
padding-left: 0;
}

ul#menu li a{
display: block;
text-decoration: none;
height: 40px;
}

#menu_varianten{
list-style: none;
display: none;
margin-left: 0;
padding-left: 0;
}

ul#menu_varianten li a{
padding-left: 4em;
height:30px;
}

А вот jQuery: 

$("ul#menu > li").hover(
    function() {
        $(this).stop(true, true).animate({fontSize:"1.4em"}, 150);
    },
    function() {
        $(this).stop(true, true).animate({fontSize:"1.0em"}, 150);
    });

Я также попробовал селектор ("ul # menu> li"). Not ("# menu_varianten"), но это не работает, к сожалению.Кто-то с идеями?

Ответы [ 3 ]

2 голосов
/ 17 февраля 2011

Вы можете попробовать развернуть только первый якорь.

Оставьте ваши HTML и CSS такими, какие они есть, и измените JavaScript на: 

$("ul#menu li").hover(

function() {
    $(this).find('a').first().stop(true, true).animate({
        fontSize: "1.4em"
    }, 150);
}, function() {
    $(this).find('a').first().stop(true, true).animate({
        fontSize: "1.0em"
    }, 150);
});

http://jsfiddle.net/RCtFU/1/

1 голос
/ 17 февраля 2011

Вы можете использовать css3 :not() селектор: 

$("ul#menu > li :not(ul)").hover(
function() {
    $(this).stop(true, true).animate({
        fontSize: "1.4em"
    }, 150);
}, function() {
    $(this).stop(true, true).animate({
        fontSize: "1.0em"
    }, 150);
});

См. jsFiddle .

1 голос
/ 17 февраля 2011

Вы можете сделать каждое подменю родным братом каждого родителя.CSS наследует, так что это было бы довольно простым решением проблемы.

Пример: http://jsfiddle.net/RCtFU/

<li class="menubox">
    <a href="#" id="varianten">Producten</a>
</li>
<li class="menubox">  <!-- probably want to change the class -->
    <ul id="menu_varianten">
        <li><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
    </ul>
</li>

Вам нужно будет сделать некоторые дополнительные корректировки (разные классы и т. Д.) для различения меню и подменю.

...