1

我正在使用默认设置为 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 精灵位置。如果我选择默认隐藏面板，则应将切换设置为“未激活”以显示 + sprite 位置。

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

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

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

4

1 回答 1

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 ...
于 2010-10-15T11:05:16.907 回答