当我点击时显示下拉列表

Question

<script> 
    $(document).ready(function({$("#more").click(function()$(".dropdown").fadeToggle("slow")});}); 
</script> 

这是我的更多选项的脚本。当我再次单击时单击并隐藏它时，我想显示下拉列表。使用这段代码，当我点击并显示当我再次点击时，我所能得到的只是隐藏。我想让它逆转。

如何更改默认显示？

Answer 1

你的代码的工作，它只是有一些错字的。

，并定义了默认状态下，.dropdown的display属性更改为none

$(document).ready(function() { 
 
    $("#more").click(function() { 
 
     $(".dropdown").fadeToggle("slow") 
 
    }); 
 
});

.dropdown { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="more">click for more</div> 
 
<div class="dropdown">Droppie down</div>

Answer 2

您可以使用CSS display:none属性在页面加载时隐藏div。

如：

#more{ 
    display:none; 
} 

Answer 3

$("#more").on('click', function() { 
    $(".dropdown").fadeToggle("slow", "linear"); 
});