調整jQuery腳本以將高度添加到父元素

我使用Soh Tanaka的腳本在手風琴風格中切換打開和關閉的div內容。調整jQuery腳本以將高度添加到父元素

<script language="javascript" type="text/javascript"> 
      $(document).ready(function(){ 

       //Hide (Collapse) the toggle containers on load 
       $(".toggle_container").hide(); 

       //Switch the "Open" and "Close" state per click then slide up/down (depending on open/close state) 
       $("h3.trigger").click(function(){ 
        $(this).toggleClass("active").next().slideToggle("slow"); 

        return false; //Prevent the browser jump to the link anchor 
       }); 

      }); 
</script>

我試圖去適應這個腳本，以便切換也增加了與#join_find_talk id的容器div的高度增加了50像素。幫助，請...

你可以看到它在這裏的行動：http://www.snakeandherring.com.au/join/

來源

2011-12-07 Nathan Shanahan

這將是很好，如果你可以包含一些HTML，並進一步描述你的意思是「切換增加50px」。 – Stefan

我使用腳本來切換內容，你可以在這裏看到它的動作：snakeandherring.com.au/dev/#join_find_talk。如果你點擊查找鏈接，你可以看到一個手風琴菜單列出位置。我試圖創建一個解決方案，當多個位置打開時，背景也會擴展....希望這些清楚嗎？ –

我想我可能會開始明白你想要做什麼。內容區域（#find_content）比背景圖片大，但您希望背景隨之增長，不是嗎？ – Stefan

你不應該使用JavaScript通過定義的量來增加元素的高度。這是CSS的用途。

然而，Javascript可以幫助你做什麼，是做動態的一部分。所以，不要改變元素的高度，而是增加一個類。這會讓你稍後改變你的尺寸，而不必編輯Javascript。

一個例子：

<style type="text/css"> 
    #join_find_talk { height: 100px; } 
    #join_find_talk.expanded { height: 150px; } 
</style> 

<script type="text/javascript"> 
    $("h3.trigger").click(function(e) { 
    e.preventDefault(); // Use this, not return false; 
    $("#join_find_talk").toggleClass("expanded"); 
    }); 
</script>

注意，沒有高度/寬度信息出現在的Javascript。這是風格與邏輯的分離。這是一件好事:)

來源

2011-12-07 08:16:51 Interrobang

在頁面上有多個.trigger，如果我使用切換類，然後第二個.trigger刪除「擴展」類。雖然優雅的解決方案不是我可以在此頁面上實現的解決方案。 –

在這種情況下，你的問題不清楚。您聲明「我正在嘗試修改此腳本，以便切換也將容器的高度增加50px」。你究竟想要做什麼？ – Interrobang

我使用腳本來切換內容，你可以在這裏看到它的行動：http://www.snakeandherring.com.au/dev/#join_find_talk。如果你點擊查找鏈接，你可以看到一個手風琴菜單列出位置。我試圖創建一個解決方案，當多個位置打開時，背景也會擴展....希望這些清楚嗎？ –

調整jQuery腳本以將高度添加到父元素

回答

相關問題