使用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>

现在已经有很多的插件做同样的事情。查看[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');"

试试这个

谢谢你的完美作品 –

答

创建一个单独的.js文件并将其包含在任何你想要的页面。但是记住保持ID相同：3

谢谢，但这不是真正的解决方案，除了我需要定义多个面板而不只是一个。 –

使用JQuery显示/隐藏div面板所需的JavaScript库

相关推荐