可摺疊文本框顯示不正確

我在CodePen中創建了一個我想要添加到我的網站中的工作概念。但是，當我將代碼放入我的網站時，它無法正常工作。我找不到在這裏翻譯的東西。任何幫助將不勝感激。可摺疊文本框顯示不正確

我怎麼想它的工作
http://codepen.io/Mdade89/pen/JKkYGq

如何它目前正在
https://premierdisability.com/faq-new/

.question { 
 
    vertical-align: top; 
 
    height: auto !important; 
 
    font-family: Helvetica,sans-serif; 
 
    font-size: 20px; 
 
    font-weight: bold; 
 
    margin: 20px; 
 
    padding: 20px; 
 
    background-color: pink; 
 
    width: 280px; 
 
    border-radius: 10px; 
 
} 
 

 
.answer { 
 
    display:none; 
 
    font-family: Helvetica,sans-serif; 
 
    font-size: 14px; 
 
    font-weight: normal; 
 
} 
 

 
.show { 
 
    display: none; 
 
    text-decoration: none; 
 
} 
 

 
.hide:target + .show { 
 
    display: inline; 
 
    text-decoration: none; 
 
} 
 

 
.hide:target { 
 
    display: none; 
 
    text-decoration: none; 
 
} 
 

 
.hide:target ~ .answer { 
 
    display:inline; 
 
    text-decoration: none; 
 

 
} 
 

 
@media print { 
 
    .hide, .show { 
 
    display: none; 
 
    } 
 
}

<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
    <meta charset="utf-8"> 
 
    <title>This is a title</title> 
 
    <link rel="stylesheet" href="style.css"> 
 
    </head> 
 
    <body> 
 

 

 

 
    <div class="question"> 
 
    <a href="#hide1" class="hide" id="hide1">First question</a> 
 
    <a href="#show1" class="show" id="show1">First question after click</a> 
 
    <div class="answer"> 
 
    <p>Here is the answer</p> 
 
    </div> 
 
    </div> 
 

 
    <div class="question"> 
 
    <a href="#hide2" class="hide" id="hide2">Second question</a> 
 
    <a href="#show2" class="show" id="show2">Second question after click</a> 
 
    <div class="answer"> 
 
    <p>Here is the answer</p> 
 
    </div> 
 
    </div> 
 

 
    <div class="question"> 
 
    <a href="#hide3" class="hide" id="hide3">Third question</a> 
 
    <a href="#show3" class="show" id="show3">Third question after click</a> 
 
    <div class="answer"> 
 
    <p>Here is the answer</p> 
 
    </div> 
 
    </div> 
 

 
    <div class="question"> 
 
    <a href="#hide4" class="hide" id="hide4">Fourth question</a> 
 
    <a href="#show4" class="show" id="show4">Fourth question after click</a> 
 
    <div class="answer"> 
 
    <p>Here is the answer</p> 
 
    </div> 
 
    </div> 
 

 
    </body> 
 
</html>

來源

2016-07-26 IamDade89

你應該REM奧雅納的<br>標籤的第一錨後：

<a href="#hide3" class="hide" id="hide3">Third question</a> 
<br> 
<a href="#show3" class="show" id="show3">Third question after click</a>

應該是：

<a href="#hide3" class="hide" id="hide3">Third question</a> 
<a href="#show3" class="show" id="show3">Third question after click</a>

這是因爲選擇.hide:target + .show得到HTML的正是下一個元素。

來源

2016-07-26 16:24:45 moshemeirelles

有趣的我實際上並沒有加入任何
的，但WP在加入它們，除非他們在同一條線上。 – IamDade89

是的，這是來自框架的東西，你可以嘗試使用'〜'選擇符intead'+'來獲取.show – moshemeirelles

這是在CodePen中工作的，因爲它不會將目標href（例如「＃hide3」）附加到URL，因爲CodePen位於iframe內部，並且不會影響其父頁面。您的網站是附加的元素，你點擊的URL中的href，然後將下面的CSS被隱藏了的元素：

.hide:target { 
    display: none; 
    text-decoration: none; 
}

來源

2016-07-26 16:27:06 Josh

可摺疊文本框顯示不正確

回答

相關問題