алгоритм меню на подобие Accordion jQyery UI

23.05.2013, 22:18. **Показов** 741. **Ответов** 0

Author24 — интернет-сервис помощи студентам

вот код

JS Bin чтоб сразу поняли суть

нужно сделать на скрипт на подобие Accordion меню http://jqueryui.com/accordion/

в условиях если я правильно их сформулировал:
1 уровень: 1 клик = цвет
2 уровень: 2 клика = перемещение

1 уровень, 1 активно: 2-3 неактивно
2 уровень, 1 активно: 2-3 неактивно выборка между 2-3 на 1 уровне
2 уровень, 2 активно: 1,3 неактивно выборка между 1,3 на 1 уровне
2 клика по 2 уровню активному: 2 уровень неактивный(возврат к исходному положению), выборка между 1-3 на 1 уровне
весь цикл

щас буду писать сам, через if if если знаете как проще(а я думаю вы знаете) подскажите или дайте литературу
благодарочка

HTML5

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="http://ricostacruz.com/jquery.transit/jquery.transit.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script type="text/javascript">
$(document).ready(function(){
 $('div').click(function(){
    $('div').removeClass('active');
    $(this).addClass('active');
 })
 .dblclick(function(){
    $(this).animate({backgroundColor: "green"}).delay(500).transition({x:'400px',y:'150px',rotate:'-360deg'},1000).animate({width: "400px"},300);
 }); //http://ricostacruz.com/jquery.transit/
 
});/*end  ready*/
</script>
</head>
<style>
    div:first-child {
        left:230px;
    }
    div {
        width:200px;
        height:100px;
        background:rgba(230,210,210,1);
        margin: 10px;
        position:absolute;
    }
    div:last-child {
        left:450px;
    }
    .active {
        background: #aa0000;
    }
</style>
<body>
  
    <div>
    </div>
    <div>
    </div>
    <div>
    </div>
  
</body>
</html>

	23.05.2013, 22:18