Форум

hhpd · #1 (**permalink**) 15.02.2013, 23:06

Добрый вечер всем,

Имеется следующее выпадающее меню:

$("#downsideMenu:nth-child(1)").hover(function(){
$("#downsideMenu:nth-child(1) :nth-child(2)").css("display","block"); }, function(){
$("#downsideMenu:nth-child(1) :nth-child(2)").css("display","none");
})
.................................................. ............................................
$("#downsideMenu:nth-child(6)").hover(function(){
$("#downsideMenu:nth-child(6) :nth-child(2)").css("display","block"); }, function(){
$("#downsideMenu:nth-child(6) :nth-child(2)").css("display","none");
})
})
Все прекоасно работает __________________________________________________ _____________Как можно сократить код, используя цикл "for" и следующий вид:

var downsideMenu = $("#downsideMenu :nth-child(i)");
for (var i=1; i<7; i++){
???????????
}
$("#downsideMenu:nth-child(i)").hover(function(){
$("#downsideMenu:nth-child(i) :nth-child(2)").css("display","block"); }, function(){
$("#downsideMenu:nth-child(i) :nth-child(2)").css("display","none");
})
})
Что является телом цикла в этом случае? Нет ли ошибки в объявлении переменной?
Подскажите, пожалуйста, если можете.
Заранее благодарен.
DTM

danik.js · #2 (**permalink**) 15.02.2013, 23:42

hhpd, кажется у вас jQuery головного мозга. Срочно лечить. В данном случае очень хорошо помогает препарат CSS:

<!DOCTYPE html>
<style>
#downsideMenu > li{
    position: relative;
    float: left;
    list-style: none;
    margin: 0 10px;
}
#downsideMenu span{
    cursor: pointer;
    display: block;
    border: 1px solid #eee;
}
#downsideMenu ul{
    position: absolute;
    top: 100%;
    left: 0;
    display: none;
    background: #eee;
    min-width: 200px;
}
#downsideMenu > li:hover ul{
    display: block;
}
</style>
<ul id="downsideMenu">
    <li>
        <span>Бла бла</span>
        <ul>
            <li>Суб-бла-бла</li>
            <li>Суб-бла-бла</li>
            <li>Суб-бла-бла</li>
        </ul>
    </li>
    <li>
        <span>Бла бла</span>
        <ul>
            <li>Суб-бла-бла</li>
            <li>Суб-бла-бла</li>
            <li>Суб-бла-бла</li>
        </ul>
    </li>
    <li>
        <span>Бла бла</span>
        <ul>
            <li>Суб-бла-бла</li>
            <li>Суб-бла-бла</li>
            <li>Суб-бла-бла</li>
        </ul>
    </li>
</ul>

Возможно это просто врачебная ошибка...

Форум

Справочник

Discord чат

Курсы javascript