jquery - デフォルトでjqueryのトグル効果

Question

私の要件は次のとおりです。li をクリックすると、その 'p' 兄弟が下にスライドし、連続してクリックすると上にスライドする必要があります。次のコードで達成しました。ただし、デフォルトでは「p」は下にスライドされます。スライドの上下をクリックしたときのみ機能します。デフォルトで p 要素を上にスライド (非表示) したい。これを達成する方法は？

HTML:

 <ul id = "duration">
        <li id="time">Time</li>
        <p><input type="text" id="from" /></p>
        <p><input type="text" id="to" /></p>
    </ul> 

Jクエリ:

  $(function(){
     $('ul #time').toggle(function(){
        $("#duration p").show("slow");
    },
    function(){
        $("#duration p").hide("slow");
    });
});     

Answer 1

ページの最初でそれらを非表示にするだけです。

$(document).ready(function() {
   $("#duration p").hide();
});

Answer 2

$("#duration p").css("display",'none');

これを最初の行として追加してみてください$(function(){)

これpにより、デフォルトですべてが非表示になります

Answer 3

これを使って

$("#duration p").toggle();
$(document).on("click", '#time', function(){
    $("#duration p").toggle("slow");
});