Question

我有这个代码，但我想在窗口加载时隐藏.test。这是切换功能。我不给css。我希望这很容易，但我无法解决这个问题。

    <script>
$('#toggleDiv').toggle(function() {
    $('.test').delay(500).animate({
        'opacity': 0,
        'right': '-100%'
    });
    $(this).delay(1000).queue(function(n) {
        $(this).html('show');
        n();
    });
}, function() {
    $('.test').delay(500).animate({
        'opacity': 1,
        'right': '0%'
    });
    $(this).delay(1000).queue(function(n) {
        $(this).html('hide');
        n();
    });
}); 
    </script>

HTML

<pre>
<div id="toggleDiv">hide</div>
<div class="test">This secret has been passed down from generation to generation in our family and it reveals how to win a man’s heart.</div>
</pre>

Answer 1

尝试如下......它会帮助你......

<强> HTML：

<pre>
<div id="toggleDiv">show</div>
<div class="test">This secret has been passed down from generation to generation in our family and it reveals how to win a man’s heart.</div>
</pre>

<强> JQuery的：

$( ".test" ).toggle();
$("#toggleDiv").click(function(){
    if($("#toggleDiv").text() =="show")
    {
        $("#toggleDiv").text("hide");
    }
    else
        $("#toggleDiv").text("show");
      $( ".test" ).slideToggle( "slow" );
});

<强> CSS：

#toggleDiv { cursor: pointer; cursor: hand; }

小提琴： http://jsfiddle.net/2gD4Y/

如果您想滑动div信息，请尝试如下：

Jquery：

$(".test").hide();
$("#toggleDiv").click(function(){
    if($("#toggleDiv").text() =="show")
    {
        $("#toggleDiv").text("hide");
    }
    else
        $("#toggleDiv").text("show");
      $(".test").toggle("slide", {direction:'right'});
});

小提琴： http://jsfiddle.net/2gD4Y/1/

Answer 2

尝试使用.hide()和.show()功能。

Answer 3

$( document ).ready(function() {
   $(".test").hide();
});

Answer 4

<script>
 $(document).ready(function(){
                   $("#toggleDiv").click(function(){
                   $("#test").toggle();
                   });
               });
</script>

Jquery秀隐藏

4 个答案: