Question

我有一个简单的fieldset和div面板，我想最初展示。如果您然后单击按钮/图像或文本我然后想要隐藏div面板。让我们来调用这个＆＃34; myPanel＆＃34;。再次单击按钮/图像或文本将再次显示它。现在我在下面的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>

Answer 1

如果你想让它成为你的，那么它很简单，在单独的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');"

试试这个

Answer 2

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

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

2 个答案: