Question

我有一个CSS样式表，其中包含几个用于设计手风琴元素样式的类。由于我不得不使用编辑器软件中的一些限制，我需要通过JavaScript嵌入其他手风琴。这个脚本只允许我使用三个CSS类来设计手风琴的样式。我想给他们一个类似于编辑创建的风格。

我的问题是我无法弄清楚如何“分解”以下多个类（来自编辑软件的那些）到三个新类（JS的那些类）以获得类似的手风琴风格。

编辑器中的现有CSS类：

<cc:*> Accordeon </cc:*>

.sqracc {
  box-sizing: border-box;
  margin: 0 auto 30px auto;
  max-width: 1400px;
}
.sqracc .sqracchead {
  box-sizing: border-box;
  margin: 0 30px;
  padding: 0;
  border-bottom: 1px solid <cc:print value="site.properties.design.boxborder">;
  -webkit-tap-highlight-color: transparent;
  cursor: pointer;
}
.sqracc .sqracchead:after {
  visibility: hidden;
  display: block;
  font-size: 0;
  content: " ";
  clear: both;
  height: 0;
}
.sqracc .sqracchead div {
  padding: 10px 20px 10px 32px;
  border-top: 1px solid <cc:print value="&site.properties.design.boxborder">;
  border-left: 1px solid <cc:print value="&site.properties.design.boxborder">;
  border-right: 1px solid <cc:print value="&site.properties.design.boxborder">;
  cursor: inherit;
  float: left;
  background: #ffffff url(<cc:print value="&accclosed.svg.filename">) 10px 50% no-repeat;
  min-width: 30%;
  -webkit-user-select: none;
  user-select: none;
}
.sqracc .sqracccontainer {
  display: none;
}
.sqracc.sqraccopen .sqracccontainer {
  display: block;
}
.sqracc.sqraccopen .sqracchead div {
  background-image: url(<cc:print value="&accopen.svg.filename">);
}
@media screen and (max-width: 767px) {
  .sqracc .sqracchead {
    margin: 0;
    padding: 0 30px;
  }
}

这是我的新课程：

.bar {
}

.baropen {
}

.content {
}

我尝试了以下但是没有用：

.balken {
  box-sizing: border-box;
  cursor: hand;
  cursor: pointer;
  padding: 10px 20px 10px 32px;
  border-top: 1px solid <cc:print value="&site.properties.design.boxborder">;
  border-left: 1px solid <cc:print value="&site.properties.design.boxborder">;
  border-right: 1px solid <cc:print value="&site.properties.design.boxborder">;
  cursor: inherit;
  float: left;
  background: #ffffff url(<cc:print value="&accclosed.svg.filename">) 10px 50% no-repeat;
  min-width: 30%;
}

.balkenopen { 
    cursor: hand;
    cursor: pointer;
    background-image: url(<cc:print value="&accopen.svg.filename">)no-repeat;

}
.inhalt {
    padding: 10px;
}

[编辑]

这是我在编辑器代码中嵌入的JS：

<script type="text/javascript" src="<cc:print value="&ddac.url">">">

</script>
<cc:if cond="&para.properties.design.ddaccor.first.default.open">
<cc:set value="0" obj="para.properties.design.ddaccor.first.default.open"></cc:if>
<script type="text/javascript">
<cc:if cond="&topic.properties.design.ddaccor.scrolltop"><cc:set value="true" obj="scrollstatus"><cc:else><cc:set value="false" obj="scrollstatus"></cc:if>
<cc:if cond="&topic.properties.design.ddaccor.default.open gt 0"><cc:set value="&topic.properties.design.ddaccor.default.open-1" obj="topic.properties.design.ddaccor.default.open"></cc:if>
//Initialize first Default Open :
ddaccordion.init({
headerclass: "bar", //Shared CSS class name of headers group
contentclass: "content", //Shared CSS class name of contents group
revealtype: "click", //Reveal content when user clicks or onmouseover the header? Valid value: "click", "clickgo", or "mouseover"
mouseoverdelay: 200, //if revealtype="mouseover", set delay in milliseconds before header expands onMouseover
collapseprev: true, //Collapse previous content (so only one open at any time)? true/false 
defaultexpanded: [<cc:print value="&topic.properties.design.ddaccor.default.open">], //index of content(s) open by default [index1, index2, etc]. [] denotes no content.
onemustopen: false, //Specify whether at least one header should be open always (so never all headers closed)
animatedefault: false, //Should contents open by default be animated into view?
scrolltoheader: <cc:print value="&scrollstatus">, //scroll to header each time after it's been expanded by the user?
persiststate: false, //persist state of opened contents within browser session?
toggleclass: ["bar", "baropen"], //Two CSS classes to be applied to the header when it's collapsed and expanded, respectively ["class1", "class2"]
togglehtml: ["none", "", ""], //Additional HTML added to the header when it's collapsed and expanded, respectively  ["position", "html1", "html2"] (see docs)
animatespeed: "<cc:print value='&topic.properties.design.ddaccor.slide.speed'>", //speed of animation: integer in milliseconds (ie: 200), or keywords "fast", "normal", or "slow"
oninit:function(expandedindices){ //custom code to run when headers have initalized
    //do nothing
    },
onopenclose:function(header, index, state, isuseractivated){ //custom code to run whenever a header is opened or closed
    //do nothing
    }
})
</script>

正如您所看到的，此脚本已经给出了类。我无法弄清楚如何编辑这些类，以便他们创建一个类似于编辑器CSS中的手风琴风格类的风格。

整个页面只有一个CSS文件。 [/编辑]

Answer 1

我不知道这种类型的编辑器，但你有两种方法可以实现你想要的：的解决方案＃1：如果有编辑器css的参考只需将它放在定制的css参考e.ge

之前
<html> <head> <link rel="stylesheet" href="editor.css"> <link rel="stylesheet" href="YourCustomizedStyle.css"> </head> <body> </body> </html>

这将使您的样式覆盖编辑器样式的溶液＃2：在CSS上使用!important（我不喜欢这种方式），如下所示：

.balken { box-sizing: border-box !important; cursor: hand !important; cursor: pointer !important; padding: 10px 20px 10px 32px !important; border-top: 1px solid <cc:print value="&site.properties.design.boxborder"> !important; border-left: 1px solid <cc:print value="&site.properties.design.boxborder"> !important; border-right: 1px solid <cc:print value="&site.properties.design.boxborder"> !important; cursor: inherit !important; float: left !important; background: #ffffff url(<cc:print value="&accclosed.svg.filename">) 10px 50% no-repeat !important; min-width: 30% !important; } .balkenopen { cursor: hand !important; cursor: pointer !important; background-image: url(<cc:print value="&accopen.svg.filename">)no-repeat !important; } .inhalt { padding: 10px !important; }

将现有的CSS类合并到新的CSS类中以获得相同的设计输出但具有更少的类

1 个答案: