Question

我目前有一个与javascript代码链接的HTML页面，它允许我按下显示隐藏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;

}

Answer 1

嘿伙伴我已经更详细地查看了你的代码，这里有一个代码示例，我将你的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>

Answer 2

Z-index应该在CSS中对它进行排序

以下如何使用它的示例，我希望这会有所帮助：）

这是一个代码示例，我会使用999999：p这只是你如何做的一个例子

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

#YourDiv {
Z-Index: 999999
}

#YourButton {
Z-Index:-999999
}

Answer 3

我通常使用CSS来实现这种效果。您只需要“输入[type ='复选框']”和标签。

<强>的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进行简单的事情会导致黑暗面。

按下按钮时下拉div

3 个答案: