使用 slidetoggle() 到 show/hide 我的 div

Question

所以我有一个按钮，然后是一个包含 div 的 div，默认情况下 div 是隐藏的（显示：none，对吧？） .

我想在每次单击时显示和隐藏列表，我正在使用 js slidetoggle() 但无法正常工作，因为我是一个完全的新手。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>


<script>
$(document).ready(function(){
    $("#expand").click(function(){
        $(".infor").slideToggle();
    });
});
</script>

<button id="expand"><h6 style="">Leer más</h6></button>

<div class="info" style="">
   <ul>
     <li>info1</li>
  <li>info2</li>
  <li>info3</li>
  <li>info4</li>
  <li>info5</li>
   </ul>
</div>

我很想向你们学习如何做到这一点，来自西班牙的问候。

Answer 1

您可以使用 display:none 或者您可以使用 $(".info").hide();

将其隐藏在准备好的页面上

你的代码大部分都很好，但你的代码片段中也有一些拼写错误：

$(".infor").slideToggle(); 应该是 $(".info").slideToggle();

您更新的脚本

$(document).ready(function(){
    
    $(".info").hide();

    $("#expand").click(function(){
        $(".info").slideToggle();
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button id="expand"><h6 style="">Leer más</h6></button>

<div class="info" style="">
   <ul>
   <li>info1</li>
  <li>info2</li>
  <li>info3</li>
  <li>info4</li>
  <li>info5</li>
   </ul>
</div>

Answer 2

您在 Javascript 中为 class 名称指定了“.infor”，但您的 class 在 HTML 中被命名为“.info”。

您需要重命名如下：

$(document).ready(function(){
    $("#expand").click(function(){
        $(".info").slideToggle();
    });
});

使用 slidetoggle() 到 show/hide 我的 div

using slidetoggle() to show/hide my div

jquery

hide

show

slidetoggle

您更新的脚本