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

问题描述：

我已尝试所有与我的查询有关的问题，但无法找到正确的解决方案。现在我通过使用slideToggle找到了我的解决方案。现在我想让我的所有div在页面加载时展开。如何在页面加载中扩展我的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>

您想展开负载上的第一个div吗？ –

全部div加载首页div –

你在混淆回答需要全部div扩展还是只有firstone？ –

答

更新您的风格：

.expandable { 
    display:block; 
}

现在在页面加载所有的div展开默认

谢谢回答。非常好的ans。简单的更改 –

答

案例1：在文件准备将$(".expandable:first").slideToggle('fast');。这将扩大首次负荷。

请检查以下代码片段以获得更多理解。

$('.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'); 
 
});

.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>

案例2：在文件准备将$(".expandable").slideToggle('fast');。这将扩大所有负载。

请检查以下代码片段以获得更多理解。

$('.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'); 
 
});

.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>

谢谢。为了答案。你的ans工作 –

答

编辑：这是你想要的吗？

$(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'); 
 
});

.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>

谢谢。为了答案。您的ans工作 –

因此，将其标记为解决方案，以便访问此帖的其他人可以快速找到它。干杯! =） – JoelBonetR

答

试试这个：

$(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>

谢谢。为了答案。你的ans工作 –

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

相关推荐