Форум

pizzZ · #1 (**permalink**) 17.11.2009, 17:53

Вобщем сейчас имеем:

$("#sidebar").ready(function(){
    $("#afloor1").click(function(){
        $("#ulpanel1").slideToggle("fast");
        $("#ulpanel1").toggleClass("active");
    });
    $("#afloor2").click(function(){
        $("#ulpanel2").slideToggle("fast");
        $("#ulpanel2").toggleClass("active");
    });
    $("#afloor3").click(function(){
        $("#ulpanel3").slideToggle("fast");
        $("#ulpanel3").toggleClass("active");
    });
    $("#afloor4").click(function(){
        $("#ulpanel4").slideToggle("fast");
        $("#ulpanel4").toggleClass("active");
    });
    $("#afloor5").click(function(){
        $("#ulpanel5").slideToggle("fast");
        $("#ulpanel5").toggleClass("active");
    });
    $("#afloor6").click(function(){
        $("#ulpanel6").slideToggle("fast");
        $("#ulpanel6").toggleClass("active");
    });
});

Поясню, как только загружаеться sidebar на кнопки afloor1-6 вешаеться событие которое скрывает/показывает блок ulpanel1-6

Так вот, как бы Вы сократили код?

Мне на ум приходит только цикл от 1 до 6. И в этом цикле вешать функции

Octane · #2 (**permalink**) 17.11.2009, 18:35

$(function(){
    $('[id^="afloor"]').click(function(){
        $("#ulpanel" + this.id.slice(-1)).slideToggle("fast").toggleClass("active");
    });
});

А вообще лучше еще HTML-покажите

e1f · #3 (**permalink**) 17.11.2009, 18:41

$(function(){
    $('#afloor1, #afloor2, #afloor3, #afloor4, #afloor5, #afloor6').each(function(i){
        $(this).click(function(){
            $('#ulpanel'+(i+1)).slideToggle('fast').toggleClass('active');
        });
    });
});

UPD А вообще лучше как-то так:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
  <title>Без имени</title>
  <meta http-equiv="content-type" content="text/html;charset=utf-8" />
  <meta name="generator" content="Geany 0.18" />
</head>
<style type="text/css">
.afloor {
    border: 3px solid green;
    margin: 3px;
    width: 30%;
    cursor: pointer;
}
.ulpanel {
    border: 3px solid navy;
    margin: 3px;
    width: 50%;
}
</style>
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript">
<!--
$(function(){
    $('.afloor').each(function(i){
        $(this).click(function(){
            $('.ulpanel:eq('+i+')').slideToggle('fast').toggleClass('active');
        });
    });
});
//-->
</script>
<body id="sidebar">
<div class="afloor">Lorem ipsum dolor sit amet, consetetur sadipscing</div>
<p class="ulpanel">Lorem ipsum dolor sit amet, consetetur sadipscing</p>

<div class="afloor">Lorem ipsum dolor sit amet, consetetur sadipscing</div>
<p class="ulpanel">Lorem ipsum dolor sit amet, consetetur sadipscing</p>

<div class="afloor">Lorem ipsum dolor sit amet, consetetur sadipscing</div>
<p class="ulpanel">Lorem ipsum dolor sit amet, consetetur sadipscing</p>

<div class="afloor">Lorem ipsum dolor sit amet, consetetur sadipscing</div>
<p class="ulpanel">Lorem ipsum dolor sit amet, consetetur sadipscing</p>

<div class="afloor">Lorem ipsum dolor sit amet, consetetur sadipscing</div>
<p class="ulpanel">Lorem ipsum dolor sit amet, consetetur sadipscing</p>
</body>
</html>

pizzZ · #4 (**permalink**) 17.11.2009, 22:59

<ul class="ulstyle">
        <li><a href="#" id="afloor1">Кнопка</a>
            <ul class="ulstyle btn-slide" id="ulpanel1">
                <li></li>  
                <li></li>                    
            </ul>
        </li>
         ...
        <li><a href="#" id="afloor6">Кнопка</a>
            <ul class="ulstyle btn-slide" id="ulpanel6">
                <li></li>  
                <li></li>                                    
            </ul>    
        </li>
    </ul>

Octane · #5 (**permalink**) 17.11.2009, 23:14

idшники для JavaScript тогда вообще не понадобятся:

<ul class="panels">
	<li>
		<a href="#" class="toggler">Кнопка</a>
		<ul>
			<li>…</li>
			<li>…</li>
		</ul>
	</li>
	…
	<li>
		<a href="#" class="toggler">Кнопка</a>
		<ul>
			<li>…</li>
			<li>…</li>
		</ul>
	</li>
</ul>

$(function() {
	$(".panels").click(function (event) {
		var obj = $(event.target);
		if (obj.hasClass("toggler")) {
			obj.next("ul").slideToggle("fast").toggleClass("active");
			return false;
		}
	});
});

pizzZ · #6 (**permalink**) 17.11.2009, 23:52

Octane,
Спасибо большое помогло

Форум

Справочник

Discord чат

Курсы javascript