想法1：

Question

我想在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个部分[可扩展的1-6]将需要以各种组合显示。

就像现在一样，我可以像上面那样使用{display：block / none等}但是我的JS按钮有点像wiggy。

Answer 1

想法1：

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

我的建议是使用body类并将其全部放在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();
}

在css中设置jQuery show hide toggle的显示

我的问题：

1 个答案:

想法1：

创意2