div中的内容未显示

Question

我有这个隐藏的div，当我单击一个按钮时，它显示正确，但是当我尝试在div内放置<p> ，它不会显示，只有当我拿出<p>一切都很好，但我只想将样式设置为像<br>这样的段落和其他东西可以使它看起来更好。 请看看这个JSFiddle

HTML

<section> <a rel="external" href="#button" id="button" class="button">&#xF011; </a> <span></span> </section>

jQuery的

$(document).ready(function(){
$('#button').click(function(){
$(this).toggleClass('on');
$('p').toggleClass('hidn');
    $('div[id=container]').toggleClass('container');
    $('p[id=p1]').toggleClass('p1');
});
});

Answer 1

您要在所有段落标记（包括div内的标记）上切换hidn类。 但是由于div中的类没有该类，因此将其添加进来，使它们不可见。

编辑：因此，要么使该段落切换为更具针对性，要么设置规则以使内容div中具有hidn类的图不可见。

Answer 2

将“ hidn”类添加到有问题的段落中，因为由于错误的jQuery选择器，您也要对其进行切换。

http://jsfiddle.net/baJme/4/

<p id="p1" class="p1 hidn">

但是，我强烈建议您使用适当的选择器重写代码。 另外，请遵循有关选择ID的评论中Arun的建议。

Answer 3

您要在所有段落标签上切换hidn类，而是向特定的<p>标签添加唯一的id尝试以下操作：

HTML：

<p id="p0" class="hidn" style="font-size: 50px;font-family: Razer Header Regular;
top: 20%; color: rgb(192,192,192); position: relative; text-align: center;">

jQuery的：

$(document).ready(function(){
$('#button').click(function(){
    $(this).toggleClass('on');
    $('#p0').toggleClass('hidn');
    $('#container').toggleClass('container');
    $('#p1').toggleClass('p1');
});
});

演示