div里面的内容不显示

Question

我有这个隐藏的 div，当我点击一个按钮时它显示正确 但是当我尝试将<p> 放在 div 中时它不会显示，只有当我取出 <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

您正在切换所有段落标签上的 hidn 类，包括 div 内的标签。但由于 div 中的那些没有类，它被添加，使它们不可见。

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

Answer 2

将 'hidn' 类添加到有问题的段落中，因为由于错误的 jQuery 选择器，您也要切换它。

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

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

但是，我强烈建议使用适当的选择器重写代码。另外，请听从 cmets 的 Arun 关于选择 id 的建议。

Answer 3

您在所有段落标签上切换 hidn 类，而是将唯一的 id 添加到特定的 <p> 标签。试试这个：

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');
});
});

Demo