Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #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.
Ответить с цитированием
  #2 (permalink)  
Старый 30.07.2012, 16:01
без статуса
Отправить личное сообщение для Deff Посмотреть профиль Найти все сообщения от Deff
 
Регистрация: 25.05.2012
Сообщений: 8,219

<script type="text/javascript" src="http://yandex.st/jquery/1.4.4/jquery.min.js"></script>





<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>


<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>


<script type="text/javascript">
//Block navigation

$(document).ready(function() {


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

	$('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; 
		});
	});


/*этот кусок это я чайник написал*/
var url=document.location.href;
 $.each($(".podmenu >li > a"),function(i){
    if(this.href==url){
        $(this).parents('ul:first').parent('li').find('a:first').click();
	return false;
    };
 });


});


</script>
Вроде так
Ответить с цитированием
  #3 (permalink)  
Старый 30.07.2012, 18:01
Новичок на форуме
Отправить личное сообщение для VovanMS Посмотреть профиль Найти все сообщения от VovanMS
 
Регистрация: 30.07.2012
Сообщений: 2

спасибо большое, работает!!!
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как добавить параметр к тегу? inhab Элементы интерфейса 8 16.04.2012 03:17
Как добавить метод ко всем элементам? zubr80 Events/DOM/Window 3 06.04.2009 05:46
как динамически добавить столбец oxx Элементы интерфейса 4 06.11.2008 17:23
Как добавить свой блог в раздел feeds этого сайта IzumeRoot Ваши сайты и скрипты 13 30.10.2008 21:11
Как сравнить класс, если их много!? Sc@M Events/DOM/Window 16 29.08.2008 12:47