javascript - Jquery 向上滑动和向下滑动切换

Question

我正在使用 ASP.NET MVC 4。我的 razor View 中有一个嵌套列表，如下所示:

<ul class="nav" id="product-cat-menu">
    <li><a href="/Products/Index?category=2002">Dental <i class="fa fa-plus-square-o rightdown"></i></a>
        <ul>
            <li><a href="/Products/Index?category=2004">Materials <i class="fa fa-plus-square-o rightdown"></i></a>
                <ul>
                    <li><a href="/Products/Index?category=2011">Pulp<i class="fa fa-plus-square-o rightdown"></i></a></li>
                    <li><a href="/Products/Index?category=3011">Etchants <i class="fa fa-plus-square-o rightdown"></i></a>
                </ul>
                <li><a href="/Products/Index?category=2006">Medicines <i class="fa fa-plus-square-o rightdown"></i></a>
                    <ul>
                        <li><a href="/Products/Index?category=2011">Pulp<i class="fa fa-plus-square-o rightdown"></i></a></li>
                        <li><a href="/Products/Index?category=3011">Etchants <i class="fa fa-plus-square-o rightdown"></i></a>
                    </ul>
                </li>
        </ul>
    </li>
    <li><a href="/Products/Index?category=2003">Oral <i class="fa fa-plus-square-o rightdown"></i></a></li>
</ul>

主要的 CSS 是:

#product-cat-menu li {
    cursor: pointer;
    position: relative;
}

#product-cat-menu li .rightdown {
    position: absolute;
    right: 0;
}

#product-cat-menu ul {
    display: none;
}

#product-cat-menu li ul li {
    padding: 5px 0 5px 25px;
    width: 100%;
}

jQuery 就像:

$(document).ready(function () {
    $("#product-cat-menu a").click(function () {
        $("#product-cat-menu ul").slideUp();
        if (!$(this).next().is(":visible")) {
            $(this).next().slideDown();
        }
    });
});

问题是，当单击 li 时，它会向下滑动子列表，但在转到 Controller 操作后，它会向上滑动。我想在页面刷新后显示下拉部分。

为此，我也在尝试以下代码:

$(document).ready(function () {
    $("#product-cat-menu a .rightdown").click(function() {
        //...........
    });
});

但这行不通。

Answer 1

我相信您需要防止 html anchor 标记 ( <a> ) 的默认行为发生。

缺少的行是:

evt.preventDefault();

完整代码示例如下:

$(document).ready(function () {
    $("#product-cat-menu a").click(function (evt) {
        evt.preventDefault();
        $("#product-cat-menu ul").slideUp();
        if (!$(this).next().is(":visible")) {
            $(this).next().slideDown();
        }
    });
});

您可以在此处的 JSFiddle 中看到: DEMO