DropDown問題在html中

我正在嘗試創建FAQ，點擊箭頭我將顯示答案。我正在通過使用這個鏈接。DropDown問題在html中

任何機構可以建議我怎樣才能得到這些CLS這樣我就可以修改，我怎麼可以把箭頭。

Cls是w3-btn w3-block w3-black w3-left-align和w3-container w3-hide我也想把箭頭。

我的代碼：

<!DOCTYPE html> 
<html> 
<title>W3.CSS</title> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"> 
<body> 
<div class="w3-container"> 
<button onclick="myFunction('Demo1')" class="w3-btn w3-block w3-black w3-left-align">Open Section 1</button> 
<div id="Demo1" class="w3-container w3-hide"> 
    <h4>Section 1</h4> 
    <p>Some text..</p> 
</div> 

</div> 
<script> 
function myFunction(id) { 
    var x = document.getElementById(id); 
    if (x.className.indexOf("w3-show") == -1) { 
     x.className += " w3-show"; 
    } else { 
     x.className = x.className.replace(" w3-show", ""); 
    } 
} 
</script> 
</body> 
</html>

來源

2017-04-21 David

提供背景圖片H4標籤，您可以用W3-顯示幫助改變箭頭，我們隱藏 –

希望這將幫助你:)

function myFunction(id) { 
 
    var x = document.getElementById(id); 
 
    if (x.className.indexOf("w3-show") == -1) { 
 
    x.className += " w3-show"; 
 
    } else { 
 
    x.className = x.className.replace(" w3-show", ""); 
 
    } 
 
}

.w3-container, 
 
.w3-panel { 
 
    padding: 0.01em 16px; 
 
} 
 

 
.w3-black, 
 
.w3-hover-black:hover { 
 
    color: #fff!important; 
 
    background-color: #000!important; 
 
} 
 

 
.w3-block { 
 
    display: block; 
 
    width: 100%; 
 
} 
 

 
.w3-btn, 
 
.w3-button { 
 
    border: none; 
 
    display: inline-block; 
 
    outline: 0; 
 
    padding: 8px 16px; 
 
    vertical-align: middle; 
 
    overflow: hidden; 
 
    text-decoration: none; 
 
    color: inherit; 
 
    background-color: inherit; 
 
    text-align: center; 
 
    cursor: pointer; 
 
    white-space: nowrap; 
 
} 
 

 
.w3-btn, 
 
.w3-button { 
 
    -webkit-touch-callout: none; 
 
    -webkit-user-select: none; 
 
    -khtml-user-select: none; 
 
    -moz-user-select: none; 
 
    -ms-user-select: none; 
 
    user-select: none; 
 
} 
 

 
.w3-block { 
 
    display: block; 
 
    width: 100%; 
 
} 
 

 
.w3-left-align { 
 
    text-align: left!important; 
 
} 
 

 
.w3-hide { 
 
    display: none; 
 
} 
 

 
.w3-show-block, 
 
.w3-show { 
 
    display: block!important; 
 
} 
 

 
.w3-btn:hover { 
 
    box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); 
 
} 
 

 
.FAQ1 { 
 
    position: relative; 
 
} 
 

 
.FAQ1 :before { 
 
    content: ''; 
 
    width: 14px; 
 
    height: 14px; 
 
    position: absolute; 
 
    right: 10px; 
 
    top: 9px; 
 
    background-image: url(https://i.stack.imgur.com/3R9OU.png); 
 
    background-repeat: no-repeat; 
 
    background-size: cover; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div class="w3-container"> 
 
    <div class="FAQ1"> 
 

 
    <button onclick="myFunction('Demo1')" class="w3-btn w3-block w3-black w3-left-align">Open Section 1</button> 
 

 
    <div id="Demo1" class="w3-container w3-hide"> 
 
     <h4>Section 1</h4> 
 
     <p>Some text..</p> 
 
    </div> 
 
    </div> 
 

 

 
</div>

來源

2017-04-21 12:00:56

這正是我想要的。謝謝:) – David

即使我現在也得到如何從那裏採取css :) – David

你想要任何解釋如何使用箭頭圖像？ –

也許有點簡單，但我覺得這是你要搜索的內容？

#arrow { 
 
    float: right; 
 
    height: 20px; 
 
    width: 20px; 
 
}

<!DOCTYPE html> 
 
<html> 
 
<title>W3.CSS</title> 
 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
 
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"> 
 
<body> 
 
<div class="w3-container"> 
 
<button class="w3-btn w3-block w3-teal w3-left-align">Open Section 1<img id="arrow" src="http://golfergroups.com/img/arr.png" alt="arrow" onclick="myFunction('Demo1')" ></button> 
 
<div id="Demo1" class="w3-container w3-hide"> 
 
    <h4>Section 1</h4> 
 
    <p>Some text..</p> 
 
</div> 
 
<script> 
 
function myFunction(id) { 
 
    var x = document.getElementById(id); 
 
    if (x.className.indexOf("w3-show") == -1) { 
 
     x.className += " w3-show"; 
 
    } else { 
 
     x.className = x.className.replace(" w3-show", ""); 
 
    } 
 
} 
 
</script> 
 
</body> 
 
</html>

如果它不工作，或者這是不是你要找的內容，讓我知道。

來源

2017-04-21 11:59:55

DropDown問題在html中

回答

相關問題