单击后如何使Jquery子菜单保持可见? [英] How To Make Jquery Submenu Stay Visible After It Is Clicked?

问题描述

我读过类似的文章，但是由于我对jquery不太满意，因此我的菜单需要更具体的帮助.

I have read similar posts but as I am not very good with jquery I need more specific help with my menu.

<div id="nav"><!--// START NAV //-->
    <dl id="nav">
        <dt class="nav"><b>ONE</b></dt>
        <dd>
            <ul>
                <li><a href="/A">A</a></li>
                <li><a href="/B">B</a></li>
                <li><a href="/C">C</a></li>

            </ul>
        </dd>
        <dt class="nav"><b>TWO</b></dt>
        <dd>
            <ul class="nav">
                <li><a href="/D">D</a></li>
                <li><a href="/E">E</a></li>
                 <li><a href="/F">F</a></li>
                </ul>
        </dd>

    </dl>
        </div><!--// END NAV //-->

这是我正在使用的JS.

Here is the JS I am using.

<script type="text/javascript">
$(document).ready(function(){
    if($("#nav")) {
        $("#nav dd").hide();
        $("#nav dt.nav b").click(function() {
            if(this.className.indexOf("clicked") != -1) {
                $(this).parent().next().slideUp(200);
                $(this).removeClass("clicked");
            }
            else {
                $("#nav dt.nav b").removeClass();
                $(this).addClass("clicked");
                $("#nav dd:visible").slideUp(200);
                $(this).parent().next().slideDown(500);
            }
            return false;
        });
    }
});
</script>

谢谢

推荐答案

菜单由于页面刷新而隐藏.您可以通过添加返回false的点击处理程序来避免这种情况.将此代码添加到您的ready处理程序中:

The menu hides due to pagerefresh. You can avoid it, by adding click handler, that returns false. Add this code to your ready handler:

$("#nav dd ul a").click(function(){
    return false;
})

这里是示例.

更新:

您可以将选定的URL存储在cookie中.这是示例:

You can store selected url in cookies. Here is sample:

$(document).ready(function() {
    if ($("#nav")) {
        $("#nav dd").hide();
        $("#nav dt.nav b").click(function() {
            if (this.className.indexOf("clicked") != -1) {
                $(this).parent().next().slideUp(200);
                $(this).removeClass("clicked");
            }
            else {
                $("#nav dt.nav b").removeClass();
                $(this).addClass("clicked");
                $("#nav dd:visible").slideUp(200);
                $(this).parent().next().slideDown(500);
            }
            return false;
        });
    }

    $("#nav dd ul a").click(function() {
        $.cookie('link_href', $(this).attr('href'));
    });

    alert($.cookie('link_href'));

    var selector = 'a[href="'+ $.cookie('link_href') +'"]';
    $(selector).parents('dd').prev().find('b').click();
});

这篇关于单击后如何使Jquery子菜单保持可见?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！