如何在頁面加載中擴展我的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');。這將擴大首次負荷。

請檢查以下代碼片段以獲得更多理解。

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

Answer 3

編輯：這是你想要的嗎？

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

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>