Question

我有以下代码可以正常工作：

＆＃13;

$(document).ready(function () {
    $('.text').hide();
    $('.expander').click(function () {
        // .parent() selects the A tag, .next() selects the P tag
        $(this).parent().next().slideToggle(200);
    });
    $('.text').slideUp(200);
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#"><div class="expander">Click Here</div></a>

<p class="text">Hidden Text</p>
<a href="#"><div class="expander">Click Here</div></a>

<p class="text">Hidden Text</p>
<a href="#"><div class="expander">Click Here</div></a>

<p class="text">Hidden Text</p>
<a href="#"><div class="expander">Click Here</div></a>

<p class="text">Hidden Text</p>

＆＃13;

然而 - 我想知道是否有办法改变jQuery，以便在页面首次加载时可以看到DIV中的内容，而不是当前发生的隐藏。

我试着评论这一行：

$('.text').hide();

但它没有任何区别。

Answer 1

你可以这样做。你的jQuery会更干净。

$(document).ready(function () {
    $('.expander').click(function () {
        $(this).parent().next().slideToggle(200);
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#"><div class="expander">Click Here</div></a>
<p class="text">Hidden Text</p>
<a href="#"><div class="expander">Click Here</div></a>
<p class="text">Hidden Text</p>
<a href="#"><div class="expander">Click Here</div></a>
<p class="text">Hidden Text</p>
<a href="#"><div class="expander">Click Here</div></a>
<p class="text">Hidden Text</p>

Answer 2

删除/注释掉$('.text').slideUp(200);和$('.text').hide();。

这两行隐藏了＆＃34;隐藏文字＆＃34;。它们都做同样的事情，隐藏匹配的元素。 .hide()隐藏了名称所描绘的元素。并且.slideUp通过使匹配元素的heigh为零来隐藏元素

来做同样的事情

Answer 3

有两个隐藏$('.text')

的函数

评论它们会按预期工作。

$(document).ready(function () {
    // $('.text').hide();
    $('.expander').click(function () {
        // .parent() selects the A tag, .next() selects the P tag
        $(this).parent().next().slideToggle(200);
    });
    // $('.text').slideUp(200);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#"><div class="expander">Click Here</div></a>

<p class="text">Hidden Text</p>
<a href="#"><div class="expander">Click Here</div></a>

<p class="text">Hidden Text</p>
<a href="#"><div class="expander">Click Here</div></a>

<p class="text">Hidden Text</p>
<a href="#"><div class="expander">Click Here</div></a>

<p class="text">Hidden Text</p>

jQuery Toggle Div - 如何在页面加载时保持div打开

3 个答案: