Javascript 按下按钮时的下拉div_Javascript_Html_Css

Javascript 按下按钮时的下拉div

javascript html css

Javascript 按下按钮时的下拉div,javascript,html,css,Javascript,Html,Css,我目前有一个链接javascript代码的HTML页面，它允许我按下一个按钮，在隐藏的div中显示内容。该功能工作正常，但是当按下按钮时，隐藏的div显示在按钮上方。不管怎样，它都可以降到按钮下方，而不是向上。以下是我正在使用的代码： HTML: 任何帮助都将不胜感激 CSS: }Z-index应该在CSS中对其进行排序下面是一个如何使用它的示例，我希望这对您有所帮助：）这是一个代码示例，我将使用999999:p，这只是一个如何实现的示例嘿，伙计，我已经更详细地查看了您的代码，这里有一个

我目前有一个链接javascript代码的HTML页面，它允许我按下一个按钮，在隐藏的div中显示内容。该功能工作正常，但是当按下按钮时，隐藏的div显示在按钮上方。不管怎样，它都可以降到按钮下方，而不是向上。以下是我正在使用的代码：

HTML:

任何帮助都将不胜感激

CSS:

}

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

下面是一个如何使用它的示例，我希望这对您有所帮助：）

这是一个代码示例，我将使用999999:p，这只是一个如何实现的示例

嘿，伙计，我已经更详细地查看了您的代码，这里有一个代码示例，我将您的Javascript更新为Jquery，因为它是一种更强大的语言：）


$（文档）.ready（函数（）{
$（“#扰流板1”）.hide（）；
$（“#按钮1”）。单击（函数（）{
$（“#扰流板1”）.show（）；
});    
$（“#按钮”）。单击（函数（）{
$（“#扰流板1”）.hide（）；
});    
});
冒险家&x25BC；
隐藏
一,。爬树

二,。滚下一座真正的大山

三,。野营

四,。筑巢

五,。撇石头

六,。冒雨跑来跑去

七,。开飞机

八,。用网捕鱼

九,。直接从树上吃一个苹果

十,。玩骗局

我通常使用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>

使用此技术，您可以将逻辑与视图分开。我的意思是，用JS来做一些简单的事情会导致黑暗面。

你能发布你的css吗？你的意思是你想在按钮下面显示隐藏的div吗？你不应该再使用一次id！扰流板1使用两次。可能位置：相对位置；关于父div和按钮可以解决您的问题，但为了确保您应该共享您的cssCan，您不只是将div放在按钮后面吗？不完全是，它提供了有关Z-index的准确信息，这应该有助于他解决此问题。因此，我建议在这种情况下使用它，可能不是在所有情况下，它都是旧的HTML属性，不兼容，但在这里它很好。也许这一次是这样的，但我建议始终链接到MDN：在开始说它不兼容之前，您可能应该检查源代码是否正确，没必要难过@Wumm更不用说。。。如果链接枯竭，带有“链接”的答案就没有那么有用了。答案应始终包含未来用户的代码示例，如果可能的话，还应包含一个提琴。我已经对其进行了更新，以便有任何人都可以理解的代码示例。哦，我还认为按钮位于div下方的部分原因是因为您是如何用html编码的：）嗨，拜伦，我刚刚尝试更改代码，使其与上面的匹配，但仍然不起作用。我有两个按钮“冒险家”和“隐藏”，点击后不会显示任何内容。还有什么我可以尝试的吗？尝试在第一个脚本上方和头部下方添加

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;";
    }   
}

#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;

#YourDiv {
Z-Index: 999999
}

#YourButton {
Z-Index:-999999
}

<!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>

<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>

#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;
}