1

我想在 CSS 中设置显示的原因是因为所有页面都需要扩展或折叠的特定内容因页面而异。就像现在一样，我似乎需要为每个页面的显示首选项加载不同的 JS 文件。我只想将所有内容集中在一个文件中...

CSS：

div.expandable1 {display:block;}
div.expandable2 {display:none;}  [etc]

HTML：

<p id="tab1" class="button plus1">NEWS -</p>
<div class="expandable1 panel1" id="one">
[content]
</div>

JS：

        $(".button").show();
        $('.plus1').toggle(function(){
            $("#one").slideDown(
            function(){
                $(".plus1").text("NEWS -")
            }
            );
        },function(){
            $("#one").slideUp(
                function(){
                    $(".plus1").text("NEWS +")
                }
            );
        });       [etc]

我的问题：

如何使用 css 控制以下内容：

例如：

page A- expandable1 is expanded, expandable2 collapsed 
page B- expandable1 is collapsed, expandable2 expanded

等。大约有 6-8 个不同的页面配置，其中 4-5 个部分 [expandables 1-6] 需要以各种组合显示。

就像现在一样，我可以像上面那样使用 {display:block/none,etc.} 但我的 JS 按钮有点摇摆不定。

4

1 回答 1

1

想法1：

听起来您正在尝试为每个页面编写逻辑。这里有几种方法：

我的建议是使用正文类并将其全部放在 CSS 中。

HTML：

<html>
<head>
</head>
<body class="pageA">
</body>
</html>

CSS

/* PageA Styles */
.pageA div.expandable1 {display:block;}
.pageA div.expandable2 {display:none;}

/* PageB Styles */
.pageB div.expandable1 {display:none;}
.pageB div.expandable2 {display:block;}

想法 2

仅 Javascript 如果您需要使用 javascript 来完成这一切，则必须使用 window.location 检测页面名称。不是一个好方法，但绝对可行。

if (window.location.pathname === '/pageA/') {
$('div.expandable1').show();
$('div.expandable2').hide();
}
于 2013-03-21T01:17:56.313 回答