代码之家  ›  专栏  ›  技术社区  ›  user8749260

使用slidetoggle()显示/隐藏我的div

  •  2
  • user8749260  · 技术社区  · 7 年前

    我有一个按钮,然后是一个包含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>

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

    2 回复  |  直到 7 年前
        1
  •  2
  •   Master Yoda    7 年前

    您可以使用 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>
        2
  •  0
  •   Superslinky    7 年前

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

    您需要按如下方式重命名它:

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