按下按鈕時下拉div

我目前有一個與javascript代碼鏈接的HTML頁面，它允許我按下一個顯示隱藏div內容的按鈕。該功能工作正常，但是當按下按鈕時，隱藏的div會顯示在按鈕上方。無論如何，它可以下降到按鈕下方，而不是下降。這裏是我使用的代碼：按下按鈕時下拉div

HTML：

<div id="spoiler1" style="display:none"> 
    <p>1. Climb a tree<input type="checkbox"></p> 
    <p>2. Roll down a really big hill<input type="checkbox" ></p> 
    <p>3. Camp out in the wild<input type="checkbox" ></p> 
    <p>4. Build a den<input type="checkbox" ></p> 
    <p>5. Skim a stone<input type="checkbox" ></p> 
    <p>6. Run around in the rain<input type="checkbox" ></p> 
    <p>7. Fly a kte<input type="checkbox" ></p> 
    <p>8. Catch a fish with a net<input type="checkbox" ></p> 
    <p>9. Eat an apple straight from a tree<input type="checkbox" ></p> 
    <p>10. Play conkers<input type="checkbox" ></p> 

</div> 

<button id="button1" title="Click to show/hide content" type="button1" onclick="readmore1()">Adventurer &#x25BC;</button> 
<div id="spoiler1" style="display:none">spoiler text</div>

的Javascript：

function readmore1(){ 
    var spoiler1 = document.getElementById('spoiler1'); 
    var btn = document.getElementById('button1'); 


    if(spoiler1.style.display=='none') { 
     spoiler1.style.display = ''; 
     btn.innerHTML = "Adventurer &#x25B2;"; 
    } else { 
     spoiler1.style.display = 'none'; 
     btn.innerHTML = "Adventurer &#x25BC;"; 
    } 
}

任何幫助將非常感激。

CSS：

#button1 { 

    display: inline-block; 
font: normal 1.5em optima; 
line-height: 10px; 
margin-left: -10px; 
margin-bottom:20px; 
width: 250px; 
height:60px; 
border-radius:8px; 
text-align: center; 
vertical-align: central; 
color: #fff; 
border: none; 
position: relative; 
top: -5px; 
left: 30px;

}

來源

2014-04-03 user3437161

你可以發佈你的CSS？ –

你的意思是你想顯示按鈕下方的隱藏div嗎？ –

你應該永遠不要多使用一次ID！擾流1被使用兩次。也許位置：相對;在父divs和按鈕可以解決你的問題，但要確保你應該分享你的css – caramba

Z-指數應該在CSS

如何以下使用它的一個例子是排序，我希望這有助於:)

這裏是一個代碼示例，我將使用999999：p這只是你如何去做的一個例子

http://www.w3schools.com/cssref/pr_pos_z-index.asp

#YourDiv { 
Z-Index: 999999 
} 

#YourButton { 
Z-Index:-999999 
}

來源

2014-04-03 15:14:05 ByronMcGrath

請不要鏈接到w3schools。 http://w3fools.com – idmean

不是，它給你Z-index的準確信息，應該幫助他解決這個問題。所以我會推薦它用於這種情況，可能並不是所有情況下它都是舊的HTML屬性，這些屬性不兼容，但在這裏很好。 – ByronMcGrath

這次也許是這種情況，但我建議始終鏈接到MDN：https：//developer.mozilla.org/en-US/docs/Web/CSS/z-index – idmean

嘿隊友我看過你們的更詳細代碼，這裏是放在這裏的代碼示例，我你的Javascript更新到jQuery的，因爲它是一個更強大的語言:)

<!DOCTYPE html> 
<html> 
<head> 
<script> 

$(document).ready(function(){ 
     $("#spoiler1").hide(); 
$("#button1").click(function(){ 
    $("#spoiler1").show(); 
     });  

    $("#button").click(function(){ 
$("#spoiler1").hide(); 
     });  

}); 
</script> 
</head> 
<body> 
     <button id="button1" title="Click to show/hide content" type="button1">Adventurer &#x25BC;   </button> 
     <button id="button" title="Click to show/hide content" type="button">Hide</button> 
<div id="spoiler1" style="display:none"> 
    <p>1. Climb a tree 
    <input type="checkbox"> 
    </p> 
    <p>2. Roll down a really big hill 
    <input type="checkbox"> 
    </p> 
    <p>3. Camp out in the wild 
    <input type="checkbox"> 
    </p> 
    <p>4. Build a den 
    <input type="checkbox"> 
    </p> 
    <p>5. Skim a stone 
    <input type="checkbox"> 
    </p> 
    <p>6. Run around in the rain 
    <input type="checkbox"> 
    </p> 
    <p>7. Fly a kte 
    <input type="checkbox"> 
    </p> 
    <p>8. Catch a fish with a net 
    <input type="checkbox"> 
    </p> 
    <p>9. Eat an apple straight from a tree 
    <input type="checkbox"> 
    </p> 
    <p>10. Play conkers 
    <input type="checkbox"> 
    </p> 
</div> 
</body> 
</html>

來源

2014-04-04 08:28:40 ByronMcGrath

哦，我認爲部分原因按鈕是低於div是因爲你如何編寫它在HTML :) – ByronMcGrath

嗨拜倫，我剛剛嘗試改變代碼，所以它符合上述，但它仍然沒有工作。我有兩個按鈕「冒險家」和「隱藏」，點擊時不會顯示任何內容。還有什麼我可以嘗試嗎？ – user3437161

嘗試添加在第一個腳本之上和頭部之下 – ByronMcGrath

我通常對這種效果使用CSS。所有你需要的是「輸入[type ='checkbox']」和標籤。

的test.html

<link rel="stylesheet" type="text/css" href="test.css"/> 
<input type="checkobx" id="toggleCheck"/> 
<label for="toggleCheck">Label for button</label> 
<div class="hiddenContent"> 
    <p>Yours hidden stuff goes here</p> 
</div>

test.css

#toggleCheck{ display: none;} 
label[for='toggleCheck']{ 
    padding: 5px 10px; 
    background: green; 
    border-radius: 4px; 
    box-shadow: 1px 1px 2px black; 
} 
.hiddenContent{ 
    display: none; 
} 
#toggleCheck:checked + label{ 
    /* Styles for button in opened state*/ 
    box-shadow: 0px 0px 2px black; 
} 
#toggleCheck:checked + label + .hiddenContent{ 
    display: block; 
}

有了這個技術，你從你的意見分開你的邏輯。恕我直言，使用JS這種簡單的東西會導致黑暗的一面。

來源

2014-04-04 08:48:48 KillaBee

按下按鈕時下拉div

回答

相關問題