如何在页面加载中扩展我的Div？

Question

我已经尝试了与我的查询相关的所有问题，但是，无法找到正确的解决方案。现在我使用slideToggle找到了我的解决方案。 现在我希望我的所有div在页面加载时扩展。

小提琴演示 Here

下面的代码段示例

$('.expand').click(function(){
    target_num = $(this).attr('id').split('-')[1];
    content_id = '#expandable-'.concat(target_num);
    $(content_id).slideToggle('fast');
});

.expand {
    font-weight: bold;
    font-style: italic;
    font-size: 12px;
    cursor: pointer;
}
.expandable {
    display:none;
}
div {
    margin: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
    <p class="expand" id="expand-1">more 1...</p>
</div>
<div class="expandable" id="expandable-1">
    <p>1. This is the content that was hidden before, but now is... Well, visible!"</p>
</div>
<div>
    <p class="expand" id="expand-2">more 2...</p>
</div>
<div class="expandable" id="expandable-2">
    <p>2. This is the content that was hidden before, but now is... Well, visible!"</p>
</div>

Answer 1

将您的风格更新为：

.expandable {
    display:block;
}

现在在页面加载时，所有div都是默认扩展

Answer 2

案例1 ：将$( ".expandable:first" ).slideToggle('fast');放在文档准备就绪上。这将在负载上扩展第一个div。

请查看以下代码段以获取更多理解。

＆＃13;

＆＃13;

$('.expand').click(function(){
    target_num = $(this).attr('id').split('-')[1];
    content_id = '#expandable-'.concat(target_num);
    $(content_id).slideToggle('fast');
});
$(document).ready(function(){
  $( ".expandable:first" ).slideToggle('fast');
});

＆＃13;

.expand {
    font-weight: bold;
    font-style: italic;
    font-size: 12px;
    cursor: pointer;
}
.expandable {
    display:none;
}
div {
    margin: 10px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
    <p class="expand" id="expand-1">more 1...</p>
</div>
<div class="expandable" id="expandable-1">
    <p>1. This is the content that was hidden before, but now is... Well, visible!"</p>
</div>
<div>
    <p class="expand" id="expand-2">more 2...</p>
</div>
<div class="expandable" id="expandable-2">
    <p>2. This is the content that was hidden before, but now is... Well, visible!"</p>
</div>

＆＃13;

＆＃13;

＆＃13;

案例2 ：将$( ".expandable" ).slideToggle('fast');放在文档准备就绪上。这将扩大所有div的负载。

请查看以下代码段以获取更多理解。

＆＃13;

＆＃13;

$('.expand').click(function(){
    target_num = $(this).attr('id').split('-')[1];
    content_id = '#expandable-'.concat(target_num);
    $(content_id).slideToggle('fast');
});
$(document).ready(function(){
  $( ".expandable" ).slideToggle('fast');
});

＆＃13;

.expand {
    font-weight: bold;
    font-style: italic;
    font-size: 12px;
    cursor: pointer;
}
.expandable {
    display:none;
}
div {
    margin: 10px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
    <p class="expand" id="expand-1">more 1...</p>
</div>
<div class="expandable" id="expandable-1">
    <p>1. This is the content that was hidden before, but now is... Well, visible!"</p>
</div>
<div>
    <p class="expand" id="expand-2">more 2...</p>
</div>
<div class="expandable" id="expandable-2">
    <p>2. This is the content that was hidden before, but now is... Well, visible!"</p>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

编辑：这就是你想要的吗？

＆＃13;

＆＃13;

$(document).ready(function(){
    $('.expand').click();
});

$('.expand').click(function(){
    target_num = $(this).attr('id').split('-')[1];
    content_id = '#expandable-'.concat(target_num);
    $(content_id).slideToggle('fast');
});

＆＃13;

.expand {
    font-weight: bold;
    font-style: italic;
    font-size: 12px;
    cursor: pointer;
}
.expandable {
    display:none;
}
div {
    margin: 10px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
    <p class="expand" id="expand-1">more 1...</p>
</div>
<div class="expandable" id="expandable-1">
    <p>1. This is the content that was hidden before, but now is... Well, visible!"</p>
</div>
<div>
    <p class="expand" id="expand-2">more 2...</p>
</div>
<div class="expandable" id="expandable-2">
    <p>2. This is the content that was hidden before, but now is... Well, visible!"</p>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 4

试试这个：

$(document).ready(function() {

    $(".expandable").slideDown(1000);

})

最终代码：

$(document).ready(function() {
    
    $(".expandable").slideDown(1000);
    
})

.expand {
    font-weight: bold;
    font-style: italic;
    font-size: 12px;
    cursor: pointer;
}
.expandable {
    display:none;
}
div {
    margin: 10px;
}

<div>
    <p class="expand" id="expand-1">more 1...</p>
</div>

<div class="expandable" id="expandable-1">
  <p>1. This is the content that was hidden before, but now is... Well, visible!"</p>
</div>

<div>
    <p class="expand" id="expand-2">more 2...</p>
</div>

<div class="expandable" id="expandable-2">
    <p>2. This is the content that was hidden before, but now is... Well, visible!"</p>
</div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>