jquery：在元素加載時修改css屬性

我一直在研究一個非常簡單的Jquery腳本，它爲用戶顯示一些迷你儀表板（div）。當有人點擊鏈接時，會顯示正確的面板。非常像Twitter的登錄面板。jquery：在元素加載時修改css屬性

我有幾個問題，我不能用我的當前腳本理清：

如果有人禁用JavaScript，然後再每個小組應該仍然工作。所以在我的css文件中，我有類似a #panel1 {display:none;}，然後a:hover #panel1 {display:block;}。現在，當我的頁面加載jquery需要將a：hover改爲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...

來源

2011-03-11 EddyR

爲什麼不添加一個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'); 
});

來源

2011-03-11 09:35:22 daryl

當然！爲什麼我沒有想到這一點！不要以爲你對第二部分也有答案？ – EddyR 2011-03-11 11:51:35

編輯，也增加了另一種選擇;） – daryl 2011-03-11 15:38:47

$("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"); 
    });

來源

2011-03-11 09:11:32

我可以用變量openDash替換＃panel1嗎？ – EddyR 2011-03-11 09:15:31

也會在元素呈現後立即發生這種情況，還是等待整個頁面加載？ – EddyR 2011-03-11 09:21:03

^^以上編輯^^ – 2011-03-11 19:19:54

jquery：在元素加載時修改css屬性

回答

相關問題