Question

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

我想在每次点击时显示和隐藏列表，我正在使用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();

您更新的脚本

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

您指定了＆＃34; .infor＆＃34;对于Javascript中的类名，但您的类名为＆＃34; .info＆＃34;在HTML中。

您需要将其重命名为：

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

使用slidetoggle（）显示/隐藏我的div

2 个答案:

您更新的脚本