使用JQuery顯示/隱藏div面板所需的JavaScript庫

我有一個簡單的字段集和div面板，我最初要展示它。如果你然後點擊一個按鈕/圖像或文本，然後我想隱藏div面板。我們稱之爲「myPanel」。再次單擊按鈕/圖像或文本將再次顯示。現在我在下面的JavaScript中有一個解決方案，但我的問題是如何爲此創建一個庫並重新使用它，而不是寫出多個面板的方法。類似的東西：使用JQuery顯示/隱藏div面板所需的JavaScript庫

var panel = new library.panel("myPanel");

然後所有的事件都將被處理並在JavaScript庫中定義變量。

考慮下面的代碼：

<fieldset> 
     <legend>My Panel<a id="MyPanelExpandCollapseButton" class="pull-right" href="javascript:void(0);">[-]</a></legend> 
     <div id="MyPanel"> 
       Panel Contents goes here 
     </div> 
    </fieldset> 
    <script type="text/javascript"> 
     //This should be inside the JavaScript Library 
     var myPanelShown = true; 
     $(document).ready(function() { 
      $('#MyPanelExpandCollapseButton').click(showHideMyPanel); 
      if (myPanelShown) { 
       $('#MyPanel').show(); 
      } else { 
       $('#MyPanel').hide(); 
      } 
     }); 

     function showHideMyPanel() { 
      if (myPanelShown) { 
       $('#MyPanelExpandCollapseButton').text("[+]"); 
       $('#MyPanel').slideUp(); 
       myPanelShown = false; 
      } else { 
       $('#MyPanelExpandCollapseButton').text("[-]"); 
       $('#MyPanel').slideDown(); 
       myPanelShown = true; 
      } 
     } 
    </script>

來源

2016-11-21 Werner Bisschoff

現在已經有很多的插件做同樣的事情。查看[Bootstrap collapse]（http://getbootstrap.com/javascript/#collapse） –

不幸的是，如果面板展開或摺疊，引導程序崩潰不會給我一個可視指示。 –

如果你想要把它變成你那麼很簡單，做一個功能在不同的js文件：

function showHideBlock(panelId, buttonId){ 
    if($(panelId).css('display') == 'none'){ 
     $(panelId).slideDown('normal'); 
     $(buttonId).text("[+]"); 
    } 
    else { 
     $(panelId).slideUp('normal'); 
     $(buttonId).text("[-]"); 
    } 
    }

現在傳你想要的面板或塊ID隱藏/顯示和按鈕ID將導致隱藏/顯示。

onclick="showHideBlock('#MyPanel', '#MyPanelExpandCollapseButton');"

試試這個

來源

2016-11-21 12:24:50

謝謝你的完美作品 –

創建一個單獨的.js文件並將其包含在任何你想要的頁面。但是記住保持ID相同：3

來源

2016-11-21 11:47:47

謝謝，但這不是真正的解決方案，除了我需要定義多個面板而不只是一個。 –

使用JQuery顯示/隱藏div面板所需的JavaScript庫

回答

相關問題