jQuery 切换滑出面板

Question

我正在使用滑出面板，默认设置为“显示：无”。如果单击触发器，它将将该类切换为“活动”。这使得触发器显示来自精灵位置的红色 x（表示关闭）。

$(document).ready(function(){
$(".info-panel-left-trigger").click(function(){
 $("#info-panel-left").toggle(400);//switching between display and display:none
 $(this).toggleClass("active");
 return false;
});

}); 这就是我所拥有的，但现在来了我想要的，也许你们中的一个人知道如何实现这一目标。
我想创建一个选项，让面板在默认情况下显示或在默认情况下隐藏，然后切换应该采取相应的行为。这意味着，如果我选择默认显示面板，则应将切换设置为“活动”，以便显示 x 精灵位置。如果我选择默认隐藏面板，则应将切换设置为“未激活”，以便显示 + 精灵位置。

我希望我已经说得足够清楚了。 非常感谢帮助。

编辑你们是对的。需要更多解释。我只是想让它尽可能短，但这里还有更多...

我正在创建一个网站模板，模板的购买者应该能够包含这些面板以供参考。默认情况下，它应该设置显示面板并将触发器类别设置为“活动”。这将显示我的小 x 关闭。
但是，如果模板的购买者将额外的类“隐藏”添加到面板标记中，则面板应默认隐藏，并且触发器不应设置为活动状态，因为在这种情况下我的触发器会显示用于打开此面板的小+。现在明白我的想法了吗？

Answer 1

您将此默认值存储在何处（以及持久性如何）？仅在客户端进行该会话，还是在服务器端？服务器端对我来说似乎最合乎逻辑。如果是这样，当用户选择显示面板时，向 info-panel-left 的 html 添加一个类。假设我们添加了

<div id="info-panel-left" class="shown"></div>

一些 javascript，以便它读取

$(document).ready(function(){
    var infoPanel = $( '#info-panel-left' );
    var infoPanelTrigger = $( '.info-panel-left-trigger' );

    if ( infoPanel.hasClass( 'shown' ) ) {
        infoPanel.show();
        infoPanelTrigger.addClass( 'active' );
    }
    ... etc ...

（当然，您也可以使用“active”类）

编辑：好的；如果我们只坚持 JS 部分，我认为这不会改变方法太多，不是吗？只要反转它：

<div id="info-panel-left" class="hide"></div>

然后

$(document).ready(function(){
    var infoPanel = $( '#info-panel-left' );
    var infoPanelTrigger = $( '.info-panel-left-trigger' );

    if ( infoPanel.hasClass( 'hide' ) ) {
        infoPanel.hide();
        infoPanelTrigger.removeClass( 'active' );
    }
    ... click trigger, toggle etc ...