jQuery mouseover + mouseout + click для изменения нескольких (2) <li>классов / стилей CSS - PullRequest
Новая
       10

jQuery mouseover + mouseout + click для изменения нескольких (2) <li>классов / стилей CSS

0 голосов
/ 29 мая 2011

У меня есть список <ul>, содержащий 2 <li>, например:

HTML: 

<div id="list">
    <ul>
        <li>name1</li>
        <li>title1</li>
    </ul>

    <ul>        
        <li>name2</li>
        <li>title2</li>
    </ul>

    <ul>
        <li>name3</li>
        <li>title3</li>
    </ul>

    <ul>        
        <li>name4</li>
        <li>title4</li>
    </ul>
and so on...
</div>

CSS: 

#list {color: grey}
.name {color: black}
.title {color: red}

Вывод выглядит так (весь текст серый):

name1 title1
name2 title2
name3 title3
name4 title4

При наведении мыши на любой из <ul> каждый из его <li> получает класс, который выглядит следующим образом (курсивом является .name класс, жирным шрифтом является .title класс):

name1 title1
name2 title2
name3 title3 <~ наведение мыши <br> name4 title4

Когда вы мышка , он возвращается.

Кроме того, когда вы нажимаете на одном из <ul>, он остается в стиле состояния наведения мыши и запускает <a href="something">

И, наконец, при первой загрузке страницы, первый <ul> должен быть выбран следующим образом:

name1 title1
name2 title2
name3 title3
name4 title4

Мне удалось выполнить только одну из функций, скажем, щелкнуть мышью, но не все 3. Я новичок в jQuery, поэтому многие подобные функции отправляют мой мозг в спину.

Буду признателен за любую помощь, которая направит меня в правильном направлении.

Ответы [ 2 ]

2 голосов
/ 29 мая 2011

Следующие должны сделать это. Возможно, придется внести небольшие корректировки, если вы собираетесь добавить туда теги <a>, но с предоставленной HTML-структурой это должно выполнить то, что вы ищете. 

$(function(){
    $("#list ul li").hover(function(){
        $(this).parent().children().first().addClass('name');
        $(this).parent().children().last().addClass('title');
    },function(){
        $(this).parent().children().first().removeClass('name');
        $(this).parent().children().last().removeClass('title');               
    }).click(function(e){

        $(this).parent().children().first().addClass('perm-name');
        $(this).parent().children().last().addClass('perm-title');
    }); 
    $("#list ul li").first().trigger('mouseover');

});

и CSS: 

#list {color: grey}
.name,.perm-name {color: black}
.title,.perm-title {color: red}

Рабочая пример .

1 голос
/ 29 мая 2011

Спасибо за вашу помощь, Никлас.
Первый <ul> остался в состоянии "наведения мыши", поэтому я изменил код, чтобы он выглядел так, и все работает!Я не смог бы сделать это без тебя.

$(function(){
    $("#list ul li").mouseenter(function(){
        $(this).parent().children().first().addClass('name');
        $(this).parent().children().last().addClass('title');
    }).mouseleave(function(){
        $(this).parent().children().first().removeClass('name');
        $(this).parent().children().last().removeClass('title');               
    }).click(function(e){
        $("#list ul li").first().trigger('mouseleave');
         $('.perm-name').removeClass('perm-name');
        $('.perm-title').removeClass('perm-title');
        $(this).parent().children().first().addClass('perm-name');
        $(this).parent().children().last().addClass('perm-title');

    }); 
    $("#list ul li").first().trigger('mouseenter');
...