Анимация div для перекрытия поверх другого div по щелчку, затем возврат к предыдущему div по щелчку

Question

Пытается перемещаться между divs на клик (выдвигаясь сбоку с помощью анимации). Я несколько получил его на работу, но мне нужно, чтобы он «начал», когда вы вернетесь в главное меню, которое в настоящее время он не делает.

Теперь вы можете щелкнуть по значку меню (который по какой-то причине вам нужно дважды щелкнуть), чтобы открыть боковое меню. Затем, если вы нажмете «Дополнительные статьи», появится следующее меню. Нажав на стрелки < <, вы вернетесь в главное меню, но если вы снова нажмете «Больше статей», он не откроется. Кроме того, если вы закроете меню все вместе и попытаетесь его снова открыть, он не будет работать ...

Любые предложения по улучшению уборщица Способ сделать это будет очень признателен. До сих пор это это код, я использую:

HTML

<div class="triggerBox"><a href="#" id="trigger">≡</a> 
</div> 
<div class="menu"> 
     <h2>Programs</h2> 

    <ul> 
     <li><a href="#">Page</a> 
     </li> 
     <li><a href="#">Page</a> 
     </li> 
     <li><a href="#">Page</a> 
     </li> 
    </ul> 
     <h2>Pages</h2> 

    <ul> 
     <li><a href="#">Page</a> 
     </li> 
     <li><a href="#">Page</a> 
     </li> 
     <li><a href="#">Page</a> 
     </li> 
     <li><a id="interior-trigger" href="#">Page with Children > </a> 
     </li> 
    </ul> 
     <h2>College</h2> 

    <ul> 
     <li><a href="#">Full Site</a> 
     </li> 
     <li><a href="#">Apply</a> 
     </li> 
    </ul> 
</div> 
<div class="interior-menu"> 
     <h2><a id="back" href="#"><<</a>Articles</h2> 

    <ul> 
     <li>Article</li> 
     <li>Article</li> 
     <li>Article</li> 
     <li>Article</li> 
     <li>Article</li> 
     <li>Article</li> 
    </ul> 
</div> 

CSS

body { 
    font-family:"Open Sans Condensed", sans-serif; 
    font-size:12px; 
} 
.menu, .interior-menu { 
    position:fixed; 
    top:0px; 
    right:-360px; 
} 
.interior-menu { 
    display:none; 

.menu ul, .interior-menu ul { 
    display:block; 
    list-style-type:none; 
    width:300px; 
    height:100%; 
    padding:0px; 
    margin:0px; 
} 

И мой сценарий

// slide open and close the main menu 
$("#trigger").click(function() { 
    $(".menu").animate({ 
     "right": "0px", 
      "width": 'toggle' 
    }, 
    100); 
}); 
//hide the interior menu 
$("#interior-menu").hide(); 

//after clicking on a page with children, slide out the main panel 
$("#interior-trigger").click(function() { 
    $(".menu").animate({ 
     "right": "0px", 
      "width": "0px" 
    }, 
    30); 

    //slide out the parent page's child menu 
    $(".interior-menu").animate({ 
     "right": "0px", 
      "width": 'toggle' 
    }, 
    30); 
}); 

Пожалуйста, смотрите скрипку: http://jsfiddle.net/j4N38/

Заранее спасибо.

Answer 1

Посмотрите на это ... и я разветвил ваш jsfiddle, чтобы вы могли его протестировать. http://jsfiddle.net/ZLHMf/

// slide open and close the main menu 
$("#trigger").on('click', function(e) { 
    e.preventDefault(); 
    $(".menu").animate({ 
     "right": "0px", 
     "width": 'toggle' 
    }, 
    100); 
}); 
//hide the interior menu 
//$("#interior-menu").hide(); 

//after clicking on a page with children, slide out the main panel 
$('.menu').on('click', '#interior-trigger', function(e) { 
    e.preventDefault(); 
    $(".menu").animate({ 
     "right": "0px", 
     "width": "0px" 
    }, 
    30); 

    //slide out the parent page's child menu 
    $(".interior-menu").animate({ 
     "right": "0px", 
     "width": 'toggle' 
    }, 
    30); 
}); 


// click the back button to reveal the slide main panel again 
$('.interior-menu').on('click', '#back', function(e) { 
    e.preventDefault(); 
    //slide out the interior panel 
    $('.interior-menu').animate({ 
     "right": "0px", 
     "width": "toggle" 
    }, 30); 
    //slide in the main panel again 
    $(".menu").animate({ 
     "right": "0px", 
     "width": '300px' 
    }, 
    100); 
}); 

Edit:

Вы думали об использовании CSS переходы? Вероятно, вы можете выполнить большую часть этого без jquery, если вам не нужно поддерживать IE < 10.