javascript - 显示和隐藏

Question

我正在尝试创建一个显示和隐藏切换，在页面加载时隐藏元素。到目前为止...

.incl {
 position: absolute;
 z-index: 800;
 background-color: #00689C;
 text-align: left;
 padding:0 5px 5px 5px;
 color: #ffffff;
 font-size:1em;
 border-radius:3px;
 line-height:1.4em;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
 $(document).ready(function(){
  $("button").click(function(){
   $("#incl").toggle(1000);
  });
 });
</script>

<button>INCLUDES</button>
  <div id="incl">
    <ul class="incl">
      <li>bla bla</li>
      <li>bla ti bla</li>
      <li>bla bla bla</li>
 </ul>
  </div>

这里的问题是当我到达页面时加载内容。我需要反过来。

Answer 1

添加 #incl{显示:none;} 至 css

Answer 2

添加了 #incl { display: none; } 和 $("button").click(function(){ ... $(this).hide(); });

#incl {
     display: none;
 }

.incl {
 position: absolute;
 z-index: 800;
 background-color: #00689C;
 text-align: left;
 padding:0 5px 5px 5px;
 color: #ffffff;
 font-size:1em;
 border-radius:3px;
 line-height:1.4em;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
    $(document).ready(function(){
        $("button").click(function(){
            $("#incl").toggle(1000);
            $(this).hide();
        });
    });
</script>

<button>INCLUDES</button>
<div id="incl">
    <ul class="incl">
        <li>bla bla</li>
        <li>bla ti bla</li>
        <li>bla bla bla</li>
 </ul>
</div>

javascript - 显示和隐藏

javascript - show & hide

show

hide

collapse