Показать сообщение отдельно
  #1 (permalink)  
Старый 30.07.2012, 13:58
Новичок на форуме
Отправить личное сообщение для VovanMS Посмотреть профиль Найти все сообщения от VovanMS
 
Регистрация: 30.07.2012
Сообщений: 2

как добавить класс дочернему елементу?
вообщем расклад таков: имеется меню с пунктами, далее в пунктах содержится так же подменю.. подменю по умолчанию при загрузке страницы скрытое и по клику по его пунтку меню, подменю плавно раскрывается. Возникла необходимось выделять ссылки пунктов подменю, если пользователь находится на данной странице, на которую привела эта ссылка. Но при этом меню все же скрытое. Так вот НУЖНО, ЧТОБЫ ПРИ ОБОЗНАЧЕНИИ ПУНКТА ПОДМЕНЮ, ДОЧЕРНИЙ ПУНКТ МЕНЮ БЫЛ РАСКРЫТ.

в ообщем я так думаю алгоритм таков, нужно чтоб функция искала елемент со стилем .current , за тем его дочернему елементу ul.bcat ul передала класс .expanded

ниже привожу код;

html:
<ul class="bcat">
                            <li>
							    <a href="#"><span>Английский</span></a>
							        <ul id="podmenu" class="podmenu">
								        <li><a href="27-geos-ssha.html"><span>ГЕОС, США</span></a></li>
                                        <li><a href="30-geos-kanada.html"><span>ГЕОС, Канада</span></a></li>
										<li><a href="manchester.html"><span>Берлитц Манчестер</span></a></li>
										<li><a href="42-konvers.html"><span>Конверс</span></a></li>
                                        <li><a href="32-zoni-ssha.html"><span>ЗОНИ, США</span></a></li>
										<li><a href="17-zona-kanada.html"><span>ЗОНИ, Канада</span></a></li>
										<li><a href="19-zoni-angliya.html"><span>ЗОНИ, Англия</span></a></li>
										<li><a href="18-herrou-hauz.html"><span>Хэрроу Хауз, Англия</span></a></li>
								    </ul>
							</li>
                            <li>
							    <a href="#"><span>Арабский</span></a>
							        <ul id="podmenu" class="podmenu">
								        <li><a href="26-geos-marokko.html"><span>ГЕОС, Марокко</span></a></li>
								    </ul>
							</li>
                            <li>
							    <a href="#"><span>Испанский</span></a>
								    <ul id="podmenu" class="podmenu">
								        <li><a href="24-geos-kuba.html"><span>ГЕОС, Испания, Куба</span></a></li>
								    </ul>
							</li>
                            <li>
							    <a href="#"><span>Итальянский</span></a>
								    <ul id="podmenu" class="podmenu">
								        <li><a href="21-geos-italiya.html"><span>ГЕОС, Италия</span></a></li>
								    </ul>
							</li>
                            <li>
							    <a href="#"><span>Китайский</span></a>
								    <ul id="podmenu" class="podmenu">
								        <li><a href="23-geos-kitay.html"><span>ГЕОС, Бейжинг</span></a></li>
								    </ul>
							</li>
						    <li>
							    <a href="#"><span>Немецкий</span></a>
								    <ul id="podmenu" class="podmenu">
								        <li><a href="20-geos-germaniya.html"><span>ГЕОС, Германия</span></a></li>
                                        <li><a href="germanii.html"><span>Карл Дюисберг, Германия</span></a></li>
								    </ul>
							</li>
						    <li>
							    <a href="#"><span>Французский </span></a>
								    <ul id="podmenu" class="podmenu">
								        <li><a href="20-geos-germaniya.html"><span>ГЕОС, Париж или Ницца</span></a></li>
                                        <li><a href="ncuzskie-alpy.html"><span>ИФАЛЬПЕС, Французские Альпы</span></a></li>
								    </ul>
							</li>

                </ul>


css:
<style type="text/css">
.bcat{
list-style: none;
padding: 0;
margin: 0;
}

.bcat ul{
margin: 0;
margin-bottom: 5px;
}


.bcat li li img{
display: block;
float: left;
margin: -2px 6px 0px -12px;
padding-left: 10px;
}



.bcat li{
display: block;
overflow: hidden;
}
.bcat li:first-child a {margin:0 !important;}
.bcat li a{
display:block;
padding:5px 0px 0px 15px;
text-decoration:none;
height:20px;
background: #FCFCFC;
border-bottom: 1px #EAEAEA solid;
}
.bcat li a:hover{
color: #7A7A7A;
background: #F9F9F9;
text-decoration:none;
height:20px;
}

.bcat li a.expanded, .bcat li a.expanded:hover {
background: #FF845F;
height: 20px;
color: white;
font-weight: bold;
font-family: Verdana;
}


.bcat li li a, .bcat li li a:hover {
height: 18px;
padding: 5px 0px 0px 15px;
color: #6F716C;
background: #F3F3F3;

}
.bcat li li a:hover {
color:#FF8888;
}
.bcat li li a.current{
color:#0B4A06;
background: #5EC951  url(../images/curr.png) no-repeat center right;
}


.bcat li a span{
font-size: 110%;
}
.bcat li li a span {
font-size: 90%;
}
</style>


js: (извените, я чайник в js )
//Block navigation

$(document).ready(function() {

/*этот кусок это я чайник написал*/
var url=document.location.href;
 $.each($("#podmenu a"),function(){
    if(this.href==url){
        $(this).addClass('current');
		$(this).parent('ul.bcat ul').each(function() {						
			$(this).prev().removeClass('collapsed').addClass('expanded');
				});
    };
 });



/*а это функция которая плавно раскрывает по клику*/

	$('ul.bcat ul').each(function(i) {
			$(this).show().prev().removeClass('collapsed').addClass('expanded');

			$(this).hide().prev().removeClass('expanded').addClass('collapsed');
		
		$(this).prev().addClass('collapsible').click(function() { 
			var this_i = $('ul.bcat ul').index($(this).next());
			if ($(this).next().css('display') == 'none') {
				
				$(this).parent('li').parent('ul').find('ul').each(function(j) {
					if (j != this_i) {
						$(this).slideUp(200, function () {
							$(this).prev().removeClass('expanded').addClass('collapsed');
							
						});
					}
				});
				
				$(this).next().slideDown(200, function () {
					$(this).prev().removeClass('collapsed').addClass('expanded');
				});
			}else {
				$(this).next().slideUp(200, function () { 
					$(this).prev().removeClass('expanded').addClass('collapsed');
					
					$(this).find('ul').each(function() {
						$(this).hide(0, cookieDel($('ul.bcat ul').index($(this)))).prev().removeClass('expanded').addClass('collapsed');
					});
				});
			}
		return false; 
		});
	});
});


люди добрые, помогите чайнику,

Последний раз редактировалось VovanMS, 30.07.2012 в 14:04.
Ответить с цитированием