使用JQuery 100％（頁面）下拉菜單/抽屜菜單？

我一直停留試圖找出如何編寫菜單就像你看到的Playstation網站上的內容：http://us.playstation.com/使用JQuery 100％（頁面）下拉菜單/抽屜菜單？

編輯：小提琴：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>

造型是最小的，現在（對不起）因爲我只是試圖解決這個問題。感謝您提供任何幫助。

來源

2014-01-08 jjcarlson

做一個小提琴：http://jsfiddle.net/ –

小提琴製造。請參閱編輯。 – jjcarlson

要獲得100％的寬度，你不應該顯示他們作爲inline-block的和.accordion寬度設置爲100％。

在懸停事件中，您將懸停改爲true。如果下一個懸停事件發生在closeMenu的呼叫之前，那麼if子句將已經是false。

來源

2014-01-08 04:32:10 schwer

不幸的是，將.accordion設置爲100％不會導致您在示例Playstation網站中看到的菜單格式，這是我嘗試實現的佈局。我只想要下拉子菜單達到100％的寬度，頂級菜單項（.accordion）與其兄弟內聯。也許我的結構關閉了。 CODROPS的東西至少與我期待的相似：http://tympanus.net/Blueprints/HorizontalDropDownMenu/ 感謝您的建議。 – jjcarlson

您應該能夠通過改變你的.according-answer-container的CSS到fixed位置設置left和right 0一起完成你的下拉列表的寬度爲100％：

.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

來源

2014-01-11 04:42:45 ethorn10

使用JQuery 100％（頁面）下拉菜單/抽屜菜單？

回答

相關問題