如何使切换默认隐藏

Question

你好，我想知道如何在页面加载时隐藏切换按钮，我已经编写了一段简单的代码，但是当页面加载时，它默认会显示。我希望相反。

我尝试使用CSS实现这个功能，例如：

.hidden {
display:none;
}

当我使用这段代码时，元素根本不显示。

这是我的代码。

编辑过的。

<script type="text/javascript">
 function toggleDiv(divId) {
  $("#"+divId).toggle();

  }
 </script>

<a href="javascript:toggleDiv('myContent');">this is a test</a>
   <div id="myContent">
      <a href="javascript:toggleDiv('myContentt');"><span>this is a text</span></a>
          <div>this is a test #2 </div>
   </div>

          <div id="myContentt">
            test
          </div>

请帮忙。

- Rayan Sp

Answer 1

我猜你想要这样的效果：

演示（我在演示中使用了 onclick ，因为 jsfiddle 不允许在 href 上使用 JavaScript）

CSS：

.hidden{
       display:none;
    }

标记：

<a href="javascript:toggleDiv('myContent');">this is a test</a>
<div id="myContent" class='hidden'>
  <div>this is a test #1 </div>
</div> 
<br />
<a href="javascript:toggleDiv('myContentt');"><span>this is a text</span></a>
<div id="myContentt" class='hidden'>
 this is a test #2
</div>

Javascript：

function toggleDiv(divId) {
        $("#"+divId).toggle(); 
    }

- Jashwant

Answer 2

只需添加

$("your class").hide();

例子

$(document).ready(function(){
    $(".subResult").hide();
});

then you can define your function
 function toggle(){
$(".subResult").slideToggle(2000);
     }

另一个例子

$(document).ready(function(){

$("p").hide();

  $("button").click(function(){

    $("p").toggle();

  });

});

$("p").hide();这行代码在页面加载完成后隐藏了你的div。

- user3776913

---

他正在通过元素的ID来隐藏它。这种方法假定只有一个默认情况下隐藏的元素需要切换。 - Algorithmatic

如果您刷新页面，可能会遇到此问题。您应该在CSS代码中设置默认值。 - blissini

Answer 3

使用.toggleClass('hidden')来显示和隐藏你的元素。

- Tom Walters

---

请用上述代码替换 .toggle()，同时确保相关元素已经有了“hidden”类。 - Tom Walters

Answer 4

toggle() 的关键是要理解它只是切换 CSS 的 display 属性。因此，如果你想用一个元素替换另一个元素，只需确保最初隐藏的元素具有样式 display: none;。当使用 toggle() 方法时，它将使可见元素隐藏，并使用 display: none; 属性从隐藏元素中删除该属性。

- ADP