如何正确隐藏内联可折叠按钮的div？

时间：2019-10-25 作者：sound wave

PROBLEM: 放置div 与按钮相关联的wpautop函数将周围的对象封装在多达2个p 在输出中添加最多2条空行的标记（在div 和/或div).

所有这些空行都很难看，并且恶化了网站的成果，因此我想以适当的方式消除它们。

EDIT: 这是DEMO 其输出等于我在本地主机wordpress站点上看到的内容。

我在做一个可折叠的按钮(button+div) 可以内联放置，以便可以在同一行中放置多个按钮。内容隐藏在div 并可通过单击button, 然后再次单击button.

自div 是内联块元素，当放置在文本中时，它通常会移动周围的对象。特别是在wordpress, 当div 放置在文本中（最初包含在单个p 标签），其上方和下方的文本自动（通过wpautop功能）放置在两个单独的p 标签。因此div 将有一个空行（高度1em) 上方和上方，如下图所示

enter image description here

What I would like to obatin is instead a collapsible button that doesn\'t move up or down the surrounding text/objects.

我们可以说我实际上达到了目标，但我不得不引入4个类来设计div我们很快就会看到，这导致了一个混乱的系统，既不方便用户使用，也不容易记忆。

这是snippet code （CSS+JS）的可折叠按钮。

（我不会在下面的示例中使用代码段，因为div 其行为与wordpress不同：事实上，当使用代码段时，在div 不是放在两个里面p 标签。）

1。非间隔行中的按钮让我们继续上一个示例，添加button 以及div

text
text <button class="col">button</button> text
<div class="con">content</div>
text
text

enter image description here

为了避免空行，我们必须为div obejct公司

text
text <button class="col">button</button> text
<div class="con" style="margin: -1em 0 -1em;">content</div>
text
text

enter image description here

但如果我们再加一个button 在同一行中，我们必须对其关联的div 略有不同

text
text <button class="col">btn1</button> text <button class="col">btn2</button> text
<div class="con" style="margin: -1em 0 -1em;">content1</div>
<div class="con" style="margin: 1em 0 -1em;">content2</div>
text
text

enter image description here

如果我们添加更多button在同一行中，关联的divs的样式必须与第二个相似。

2。间隔线中的按钮现在考虑这种情况enter image description here. 为了保持线条之间的间距，我们必须为第一个线条添加新样式div, 而第二个不需要任何风格。

text

text <button class="col">btn1</button> text <button class="col">btn2</button> text
<div class="con" style="margin-top: -1em">content1</div>
<div class="con">content2</div>

text

enter image description here

如果我们添加更多button在同一行中，我们不必为其关联的divs

3。ul列表前的按钮考虑情况enter image description here. 这种情况相当于情况2，实际上我们必须使用相同的样式。

text <button class="col">btn1</button> text <button class="col">btn2</button> text
<div class="con" style="margin-top: -1em;">content1</div>
<div class="con">content2</div>
<ul>
     <li>text</li>
     <li>text</li>
</ul>
text

enter image description here

4。ul列表中的按钮考虑情况enter image description here. 为了保持第一个和第三个元素之间的空间，我们不必设计divs

text
<ul>
    <li>text</li>
    <li>text <button class="col">btn1</button> text <button class="col">btn2</button> text
        <div class="con">content1</div>
        <div class="con">content2</div></li>
    <li>text</li>
</ul>
text

enter image description here

现在考虑一下情况enter image description here. 为了保持button我们必须

第一行：为第一行添加新类div, 将上一种样式用于以下内容divs（特别是我们在第一个示例中看到的第二种样式）中线：使用与第一个示例中相同的样式最后一行：使用前一种样式中的一种div （特别是我们在第二个示例中看到的第一种样式）。

text
<ul>
    <li>text</li>
    <li>text <button class="col">btn1</button> text <button class="col">btn2</button> text
        <div class="con" style="margin-bottom: -1em;">content1</div>
        <div class="con" style="margin-top: 1em; margin-bottom: -1em;">content2</div>
        text <button class="col">btn3</button> text <button class="col">btn4</button> text
        <div class="con" style="margin-top: -1em; margin-bottom: -1em;">content3</div>
        <div class="con" style="margin-top: 1em; margin-bottom: -1em;">content4</div>
        text <button class="col">btn5</button> text <button class="col">btn6</button> text
        <div class="con" style="margin-top: -1em;">content5</div>
        <div class="con">content6</div></li>
    <li>text</li>
</ul>
text

enter image description here

摘要

通过在单独的css类中定义每个样式，我们可以减轻代码的负担，下面是我选择的类名：

否：这是“无p段落”的缩写，因为目标是取消在放置divdiv第一个后面的s间隔：用于第一个div 在间隔行中

  • 无：仅用于列表（ul/ol）
      • 以下是单个代码中前面的所有示例

      text
text <button class="col">btn1</button> text <button class="col">btn2</button> text
<div class="con nop">content1</div>
<div class="con nop_next">content2</div>
text

text <button class="col">btn3</button> text <button class="col">btn4</button> text
<div class="con nop_spaced">content3</div>
<div class="con">content4</div>

text
text <button class="col">btn5</button> text <button class="col">btn6</button> text
<div class="con nop_spaced">content5</div>
<div class="con">content6</div>
<ul>
     <li>text</li>
     <li>text</li>
</ul>
text
<ul>
    <li>text</li>
    <li>text <button class="col">btn7</button> text <button class="col">btn8</button> text
        <div class="con">content7</div>
        <div class="con">content8</div></li>
    <li>text</li>
    <li>text <button class="col">btn9</button> text <button class="col">btn10</button> text
        <div class="con nop_ul">content9</div>
        <div class="con nop_next">content10</div>
        text <button class="col">btn11</button> text <button class="col">btn12</button> text
        <div class="con nop">content11</div>
        <div class="con nop_next">content12</div>
        text <button class="col">btn13</button> text <button class="col">btn14</button> text
        <div class="con nop_spaced">content13</div>
        <div class="con">content14</div></li>
    <li>text</li>
</ul>
text

      enter image description here

      禁用wpautop

      通过禁用wpautop内置功能，不再p 创建段落时divs放置在文本中，因此无需设置divs

      作为一个大的副作用，通过禁用wpautop所有段落p 和换行符br 自动添加的必须手动添加。有时，手动添加它们所需的时间甚至超过了正确设置样式所需的时间div的sbuttons、 此外，有时通过手动添加p 标记创建了一个不需要的空间，因此需要添加CSS代码（这正是我们希望通过选择禁用wpautop来避免的）或添加br 相反，标签（并不总是精确地添加所需的空间）。

      这是我们必须编写的代码，禁用了wpautop，才能获得几乎相同的输出（“几乎”，因为在某些地方br 必须使用标签，而不是p 标签，和br 不总是生成与相同的高度p).

      （对以前代码的编辑标记为%% （如果编辑输出相同）或%%%% （如果编辑的输出不相同）

      <br>text<br> %%%%
text <button class="col">btn1</button> text <button class="col">btn2</button> text
<div class="con">content1</div>
<div class="con">content2</div>
text<br><br> %%%%

text <button class="col">btn3</button> text <button class="col">btn4</button> text
<div class="con">content3</div>
<div class="con">content4</div>

<br>text<br> %%
text <button class="col">btn5</button> text <button class="col">btn6</button> text
<div class="con">content5</div>
<div class="con">content6</div>
<ul>
     <li>item</li>
</ul>
text
<ul>
    <li>text</li>
    <li>text <button class="col">btn7</button> text <button class="col">btn8</button> text
        <div class="con">content7</div>
        <div class="con">content8</div></li>
    <li>text</li>
    <li>text <button class="col">btn9</button> text <button class="col">btn10</button> text
        <div class="con">content9</div>
        <div class="con">content10</div>
        text <button class="col">btn11</button> text <button class="col">btn12</button> text
        <div class="con">content11</div>
        <div class="con">content12</div>
        text <button class="col">btn13</button> text <button class="col">btn14</button> text
        <div class="con">content13</div>
        <div class="con">content14</div></li>
    <li>text</li>
</ul>
<p>text</p> %%

      enter image description here

      从放大的细节可以看出

      第一行上方的空间不同第3行和第4行之间的空间不同第4行和第5行之间的空间不同

      enter image description here

      结论

      为了实现最初的目标，我们引入了4个CSS类来设计div与关联的button在各种（但不是所有）上下文中。由于这里看到的示例并没有涵盖所有可能的情况，我确信必须添加更多的样式类。

      我不是一名程序员，所以我不知道在这种情况下使用的通常技术是什么（引入一个必须符合一些间距规则的HTML对象），但对我来说，“类解决方案”并不太实用。此外，正如我们所看到的，禁用wpautop并不总是一个好的解决方案。

      我想知道，网页设计师如何处理和解决这个问题？

    1 个回复
    SO网友:sound wave

    为了解决这个问题，我们必须使用相邻的选择器+ 和短代码。

    使用相邻的选择器，我们将任何.con a之后p, 任何p a之后.con. 以及任何br a之后div.

    p + .con { margin-top: -1em; }
.con + p { margin-top: 0; }
div + br { display: none; }
    然后我们为每个<div class=con>...</div>. 如果每个div 是一个短代码，我们可以通过循环来完成这项工作

    $shortcodes = array(\'...\',\'...\',...);
foreach ($shortcodes as $name) {
    add_shortcode( $name, function ( $atts ) use ( $name ) {
        remove_filter( \'the_content\', \'wpautop\' );
        $content = apply_filters( \'the_content\', \'<div class=con>[block name=\' . $name . \']</div>\' );
        add_filter( \'the_content\', \'wpautop\' );
        return $content;
    });
}
    否则我们就用通常的方法

    function scname_sc( $atts ) {
    remove_filter( \'the_content\', \'wpautop\' );
    $content = apply_filters( \'the_content\', \'<div class=con>...</div>\' );
    add_filter( \'the_content\', \'wpautop\' );
    return $content;
}
add_shortcode( \'scname\', \'scname_sc\' );
    最后，我们可以通过写入来获得所需的输出

    text
text <button class="col">btn1</button> text <button class="col">btn2</button> text
[...][...]
text

text <button class="col">btn3</button> text <button class="col">btn4</button> text
[...][...]

text
text <button class="col">btn5</button> text <button class="col">btn6</button> text
[...][...]
<ul>
     <li>text</li>
     <li>text</li>
</ul>
text
<ul>
    <li>text</li>
    <li>text <button class="col">btn7</button> text <button class="col">btn8</button> text
        [...][...]</li>
    <li>text</li>
    <li>text <button class="col">btn9</button> text <button class="col">btn10</button> text
        [...][...]
        text <button class="col">btn11</button> text <button class="col">btn12</button> text
        [...][...]
        text <button class="col">btn13</button> text <button class="col">btn14</button> text
        [...][...]</li>
    <li>text</li>
</ul>
text

    标签： css   javascript   buttons   小码农  

    相关推荐

    在WordPress中更改默认样式.css的版本

    我正在努力Wordpress + Bootstrap 4 根据设计定制。默认样式。css加载为：<link rel=\'stylesheet\' id=\'wp-bootstrap-starter-style-css\' href=\'http://localhost/hrone/wp-content/themes/theme_name/style.css?ver=5.2.3\' type=\'text/css\' media=\'all\' /> 我想将版本从5.2.3更改为5.