Question

我一直在试图弄清楚如何编写菜单代码，就像你在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>

现在造型很小（对不起），因为我只想弄明白这一点。感谢您提供的任何帮助。

Answer 1

要获得100％的宽度，您不应将其显示为内联块，并将 .accordion 的宽度设置为100％。

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

Answer 2

您应该能够通过将.according-answer-container的css更改为fixed位置以及设置left和right来完成下拉列表的100％宽度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

使用JQuery 100％宽度（页面）下拉/抽屉菜单？

2 个答案: