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

演示