Question

我正在使用滑出面板，默认设置为display：none。如果单击该触发器，则会将该类切换为“活动”。这使得触发器显示来自精灵位置的红色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精灵位置。如果我选择在默认情况下隐藏面板，则应将切换设置为“未激活”以显示+精灵位置。

我希望自己足够清楚。 非常感谢HELP。

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

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

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 ...

（你当然也可以使用'主动'课程）

编辑：好的;如果我们只是坚持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 ...

jQuery切换滑出面板

1 个答案: