隱藏並顯示div元素與原型和scriptaculous

我想使用原型和scriptaculous來隱藏和顯示div元素，但函數（下）利用原型setStyle屬性不起作用，我是不確定是什麼問題。隱藏並顯示div元素與原型和scriptaculous

<script type="text/javascript" language="javascript"> 
    function bodyOnload() { 
      $('content1').setStyle({ display: 'none' }); 
      $('content2').setStyle({ display: 'none' }); 
    } 
</script>  



<script type="text/javascript" language="javascript"> 

    var currentId = null; 

    Effect.Accordion = function (contentId) { 
     var slideDown = 0.5; 
     var slideUp = 0.5; 

     contentId = $(contentId); 

     if (currentId != contentId) { 
      if (currentId == null) { 
       new Effect.SlideDown(contentId, {duration: slideDown}); 
       } else { 
       new Effect.SlideUp(currentId, {duration: slideUp}); 
       new Effect.SlideDown(contentId, {duration: slideDown}); 
      } 
      currentId = contentId; 
     } else { 
      new Effect.SlideUp(currentId, {duration: slideUp}); 
      currentId = null; 
     } 
    }; 
    </script>

前面的功能被稱爲例如：

<div id="accordion"> 
    <div id="part1"> 
     <div id="nav1" onclick="new Effect.Accordion('content1');"> 
      Post a comment 1 
     </div> 
     <div id="content1"> 
      <form id="form" name="form" action="post.php" method="post"> 
      <textarea name="commentbody" cols="20" rows="10"></textarea> 
      <button type="submit">Post Comment</button> 
      <input type="hidden" name="blogID" value="1" /> 
      <input type="hidden" name="userID" value="3" /> 
      <input type="hidden" name="parentID" value="7" /> 
      <div class="spacer"></div></form> 
     </div> 
    </div> 
     <div id="part2"> 
     <div id="nav2" onclick="new Effect.Accordion('content2');"> 
      Post a comment 2 
     </div> 
     <div id="content2"> 
      <form id="form" name="form" action="post.php" method="post"> 
      <textarea name="commentbody" cols="20" rows="10"></textarea> 
      <button type="submit">Post Comment</button> 
      <input type="hidden" name="blogID" value="1" /> 
      <input type="hidden" name="userID" value="3" /> 
      <input type="hidden" name="parentID" value="7" /> 
      <div class="spacer"></div></form> 
     </div> 
    </div> 
</div>

下面的代碼會發生什麼。

在ie和firefox中，它什麼都不做，只是當你點擊調用effect.accordion方法的鏈接時，該方法按預期工作。問題在於原型函數沒有隱藏元素。任何幫助，將不勝感激。

來源

2008-12-14 clientbucket

maxnk已經涵蓋了主要問題。

但是，原型建議使用dom:loaded事件，而不是window.onload：也

document.observe("dom:loaded", bodyOnload);

，你可以嘗試原型的Element#toggle或Element#hide代替Element#setStyle（除非每個頁面上的警告適用於您的CSS）。

function bodyOnload() { 
    $('content1').hide(); 
    $('content2').hide(); 
}

來源

2008-12-14 08:31:07

哦，我只是不知道如何使它正確的原型:(現在我知道，謝謝！ – maxnk 2008-12-14 08:46:52

如果你想最初隱藏元素，它不足以寫入「function bodyOnload」。這個功能應該會在頁面加載，通過使用類似的東西被稱爲：

window.onload = bodyOnload;

，當然，我勸你給jQuery的一個嘗試:)

來源

2008-12-14 08:17:47 maxnk

太好了！它現在可以工作。你知道這是我試圖學習的一本書中的一個例子。筆者忽略了這個非常重要的一部分，就像他誤導說，引用Scriptaculous的效果庫中的最好的辦法是，像這樣：

<script type="text/javascript" src="javascripts/prototype.js"></script> 
<script type="text/javascript" src="javascripts/scriptaculous.js?load=effects"></script>

，而不是像：

<script type="text/javascript" src="javascripts/prototype.js"></script> 
<script type="text/javascript" src="javascripts/effects.js"></script>

這本書具有很大的評論在亞馬遜，但我不認爲任何審稿人都試圖使用這本書。他們都在審查其數量，而不是本書的實質內容。我試圖在書中使用的例子都沒有奏效。我必須爲自己弄清楚。我想你可以說我必須閱讀本書的其他部分才能理解某個例子，但是對於一本很大的書，其實可以這樣做嗎？如果我必須知道作者以前提到過的東西，我是否應該提醒他，至少從書本這麼大的角度來看，它實際上是一本參考書？如果你想知道：Ajax: The Definitive Guide, by Anthony T. Holdener III

更新：筆者使用的是Scriptaculous的舊版本和Prototype庫，這就是爲什麼有一個誤解。如果你得到這本書，請記住這一點。我現在對這本書深感敬意，只是因爲它的剪切體積。

來源

2008-12-14 09:32:25 clientbucket

感謝這些應用程序的SlideUp和SlideDown。

一個重要的評論：如果你不想爲你想顯示或隱藏的div設置寬度，它不能在ie7和ie8下工作。

文森特

來源

2009-09-24 16:27:03

隱藏並顯示div元素與原型和scriptaculous

回答

相關問題