100% -ная ширина (на странице) выпадающего меню с помощью JQuery?

Question

я застрял, пытаясь выяснить, как закодировать меню так же, как то, что вы видите на сайте Playstation: http://us.playstation.com/

EDIT: Fiddle: http://jsfiddle.net/jjcarlson/7q64A/

До сих пор у меня есть ряд вопросов, , Во-первых, мне не удалось создать 100% -ную ширину, потому что, я полагаю, отношения родителя/ребенка.

Вторая проблема заключается в том, что мой тайм-аут работает на всех элементах класса, а не только на текущий элемент. Другими словами, если все элементы соскользнут вниз и один зависнет, все они останутся открытыми до тех пор, пока ни один из них не будет парить в течение 1,5 секунд. Я признаю, что моя неспособность придумать решение может быть связана с моим ограниченным опытом работы с языком. Ниже CSS:

.accordion-container { 
    width: 90%; 
    padding-bottom: 5px; 
    margin: 20px 0 0 20px; 
} 

.accordion { 
    width: 40%; 
    padding: 20px; 
    margin: 0 15px 35px; 
    position: relative; 
    float: left; 
    display: inline-block; 
} 

.accordion-question { 
    margin: 0; 
    padding: 0 0 5px 20px; 
    display: inline-block; 
    color: #06F; 
    background-color: #9F0; 
    cursor: pointer; 
} 

.accordion-answer-container { 
    padding: 0 20px; 
    overflow: hidden; 
    color: #999; 
    background: #F00; 
} 

.accordion-answer { 
    margin: 0; 
    padding: 0; 
    color: #0C0; 
} 

Затем JQuery:

$(document).ready(function() { 
    var menu = $('.accordion-answer') 
    var timeout = 0; 
    var hovering = false; 
    menu.hide(); 

    $('.accordion-question').hover(function() { 
     hovering = true; 
     // Open the menu 
     $(this).closest('.accordion').find('.accordion-answer') 
      .stop(true, true) 
      .delay(400).slideDown(600); 

     if (timeout > 0) { 
      clearTimeout(timeout); 
     } 
    }) 
     .on("mouseleave", function() { 
     resetHover(); 
    }); 

    $('.accordion-answer').hover(function() { 
     hovering = true; 
     startTimeout(); 
    }) 
     .on("mouseleave", function() { 
     resetHover(); 
    }); 

    function startTimeout() { 
     timeout = setTimeout(function() { 
      closeMenu(); 
     }, 1500); 
    }; 

    function closeMenu() { 
     if (!hovering) { 
      $('.accordion-answer').stop(true, true).slideUp(400); 
     } 
    }; 

    function resetHover() { 
     hovering = false; 
     startTimeout(); 
    }; 
}); 

И, наконец, HTML:

<div class="accordion-container"> 
    <div class="accordion"> 
     <div class="accordion-question"> 
      <h2>Is this a question?</h2> 
     </div> 
     <div class="accordion-answer-container"> 
      <div class="accordion-answer"> 
       <p>To be honest, I am not sure</p> 
       <ul> 
        <li>List item one</li> 
        <li>List item two</li> 
       </ul> 
       <p>That is all.</p> 
      </div> 
     </div> 
    </div><!-- /accordion --> 
    <div class="accordion" id="testanchor"> 
     <div class="accordion-question"> 
      <h2>What would be a good second question?</h2> 
     </div> 
     <div class="accordion-answer-container"> 
      <div class="accordion-answer"> 
       <p>I don&rsquo;t know, man!</p> 
       <p>That is all.</p> 
      </div> 
     </div> 
    </div><!-- /accordion --> 
</div> 

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

Answer 1

Чтобы получить ширину 100% вы не должны отображать их как встроенный блок и установить ширину .accordion до 100%.

В режиме hover вы установили зависание в true. Если следующее событие hover происходит до вызова closeMenu, тогда предложение if будет уже false.

Answer 2

Вы должны быть в состоянии выполнить ширину на 100% ваш выпадающий список, изменяя CSS из ваших .according-answer-container в fixed положения наряду с установкой left и right 0:

.accordion-answer-container { 
    padding: 0 20px; 
    overflow: hidden; 
    color: #999; 
    background: #F00; 
    position: fixed; 
    left: 0; 
    right: 0; 
} 

An update to your fiddle shows this working