Question

我一直在研究一个非常简单的Jquery脚本，它为用户显示一些迷你仪表板（div）。当有人单击链接时，将显示正确的面板。非常像Twitter的登录面板。

我有一些问题，我无法理解当前的脚本：

如果有人禁用Javascript，那么每个面板仍应有效。所以在我的css文件中，我有a #panel1 {display:none;}然后a:hover #panel1 {display:block;}。现在，当我的页面加载jquery需要更改a：hover to display：none或者禁用它。还有一种方法可以在元素呈现后立即实现吗？
我还尝试将事件mouseup绑定到文档以关闭面板，但它无法正常工作。

帐户menu.js

(function($){
    $.fn.renderDash = function(openDash, fn) {
        var container = $(this);

        container.bind('click', function(event){event.preventDefault();clickStart();})
                 .bind('mouseup', function(event){mouseupDash();})
                 .bind('mouseover', function(event){hoverDash();})
                 .bind('mouseout', function(event){hoverDash();})

        $(document).bind('mouseup', function(event){
            if($(event.target).$(parent(container)).length==0) {
                   $(openDash).hide();
            }
        })   

        function clickStart() {
            $(openDash).toggle();
        }

        function mouseupDash() {
            return false;
        }

        function hoverDash() {
            return false;
        }


    };
})(jQuery);

的index.html

...
<script src="jquery-1.4.4.min.js" type="text/javascript"></script>
<script src="account-menu.js" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $('.panel1-start').renderDash("#panel1");
        $('.panel2-start').renderDash("#panel2");
        $('.panel3-start').renderDash("#panel3");
    });
</script>
...
</head>

<body>
...
<ul>
    <li>
        <a href="" class="panel1-start">Panel 1 Link</a>
        <ul id="panel1">
            <li>Panel 1 Content</li>
        </ul>
    </li>
panel2, panel3, etc...

Answer 1

$("a:hover #panel1").css("display","none");

这将使用jquery覆盖样式表样式。

//edits

    //for a variable as long as it is an object
    openDash.css("display","none");

    //and to perform it on page load
    $(document).ready(function(){
        openDash.css("display","none");
    });

Answer 2

为什么不在锚标记中添加no-js类。

a:hover #panel1 { display:none }
a.no-js:hover #panel1 { display:block }

然后使用jquery：

$(function() {
    $('a.no-js').removeClass('no-js');
});

然后该函数将启动，然后DOM就绪了。这样，如果启用了JS，它将始终为display:none，并且您对非JavaScript用户（no-js）有一个后备。

或者你可以反过来使用.addClass和jQuery。

a:hover #panel1 { display:block }
a.js-en:hover #panel1 { display:none }

$(function() {
    $('#panel1').parent().addClass('js-en');
});

虽然我强烈建议使用removeClass函数，或者为锚标记指定一个类。或者可能：

<a rel="panel" href="#"><span id="panel1"></span></a>

a[rel="panel"]:hover #panel1 { display:block; }
a.js-en:hover #panel1 { display:none }

$(function() {
    $('a[rel="panel"]').addClass('js-en');
});

jquery：修改元素加载的css属性

2 个答案: