Question

我已经获得了这段CSS / HTML代码，这些代码在jsfiddle上运行良好，当我在浏览器上执行test.html但是当我尝试在wordpress页面上使用它时（style.css中的样式和<页面上的HTML）只是不起作用。

我检查了所有可能性，没有覆盖样式，没有浏览器问题......有点帮助？

＆＃13;

input#show, input#hide {
    display:none;
}

div#paragraph {
    display:none;
}
input#show:checked ~ div#paragraph {
  display:block;
}

input#hide:checked ~ div#paragraph {
    display:none;
}

.showthis {
	float: left;
	background-color:#9b2f00;
	border-style: solid black 1px;
	color: #f2e07b; 
	padding: 5px;
	box-shadow: 3px 3px 3px black;
	text-align: center;
	width: 80%;
}
.hidethis {
	float: right;
	background-color:#9b2f00;
	border-style: solid black 1px;
	color: #f2e07b; 
	padding: 5px;
	box-shadow: 3px 3px 3px black;

＆＃13;

<label for="show">
	<div class="showthis">
    <span>[Show]</span></div></label><input type=radio id="show" name="group"><label for="hide"><div class="hidethis"><span>[Hide]</span></div></label>    
<input type=radio id="hide" name="group">
<div id="paragraph">Content</span>

＆＃13;

Answer 1

看起来你的HTML被wordpress编辑器破坏了，这就是我在你的页面上看到的：

<div class="showthis">[Show]</div>
<p><input id="show" name="group" type="radio"><label for="hide"><br>
</label></p>
<div class="hidethis">[Hide]</div>
<p><label for="hide"></label><br>
<input id="hide" name="group" type="radio"></p>
<div id="paragraph">
    <p>Content</p>
</div>

正如您已经发现的那样，remove_filter ('the_content', 'wpautop');是解决此问题的正确方法。您必须确保将其放在主题的 functions.php 文件中。

修改

使用以下HTML尝试：

<label for="show"><span class="showthis">[Show]</span></label> <input type=radio id="show" name="group"> <label for="hide"><span class="hidethis">[Hide]</span></label> <input type=radio id="hide" name="group"> <div id="paragraph">Content</div>

您不应该在标签元素中嵌套块级div。它不是有效的HTML，请参阅https://stackoverflow.com/a/18609649/2126792。

Showhide CSS无法在Wordpress上运行

1 个答案: