JQuery的100％宽度（页面）下拉/抽屉菜单？答案

【问题标题】：100% width (of page) drop down/drawer menu with JQuery?JQuery的100％宽度（页面）下拉/抽屉菜单？
【发布时间】：2014-01-08 02:41:47
【问题描述】：

我一直在试图弄清楚如何编写一个菜单，就像你在 Playstation 网站上看到的那样：http://us.playstation.com/

编辑：小提琴：http://jsfiddle.net/jjcarlson/7q64A/

到目前为止，我有很多问题。首先是我无法创建 100% 的宽度，因为我假设是父/子关系。

我遇到的第二个问题是我的 Timeout 适用于所有类元素，而不仅仅是当前悬停的元素。换句话说，如果所有元素都向下滑动并且一个悬停在上面，它们都将保持打开状态，直到它们都没有悬停 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>

样式现在很少（抱歉），因为我只是想弄清楚这一点。感谢您提供的任何帮助。

【问题讨论】：

制作小提琴：jsfiddle.net
小提琴制作。见编辑。

标签： javascript jquery html css jquery-hover

【解决方案1】：

要获得 100% 的宽度，您不应将它们显示为 inline-block 并将 .accordion 的宽度设置为 100%。

在悬停事件中，您将悬停设置为 true。如果下一个悬停事件发生在调用 closeMenu 之前，那么 if 子句已经是 false。

【讨论】：

不幸的是，将 .accordion 设置为 100% 不会产生您在示例 Playstation 站点中看到的菜单格式，这是我想要实现的布局。我只希望下拉子菜单达到 100% 的宽度，顶级菜单项 (.accordion) 与其同级菜单项内联。也许我的结构是关闭的。 CODROPS 至少与我想做的类似：tympanus.net/Blueprints/HorizontalDropDownMenu 谢谢你的建议。

【解决方案2】：

您应该能够通过将.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

【讨论】：