我目前正在尝试使用按钮来实现类似手风琴的小节。如果用户单击一个按钮,则会显示内容。但是我想默认显示第二个按钮的部分。有什么办法吗?
这是我现在的代码:
jQuery(function() {
jQuery('.ss_button').on('click', function() {
jQuery('.ss_content').slideUp('fast');
jQuery(this).next('.ss_content').slideDown('fast');
});
});
#ss_menu {
width: auto;
}
.ss_button {
background-color: #049132;
border-bottom: 1px solid #FFFFFF;
cursor: pointer;
padding: 10px;
margin-bottom: 5px;
color: #FFFFFF;
}
.ss_content {
background-color: white;
display: none;
padding: 10px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="ss_menu">
<div class="ss_button">Einsteiger</div>
<div class="ss_content">
<p>Test1</p>
</div>
<div class="ss_button">Mittelklasse</div>
<div class="ss_content">
<p>Test2</p>
</div>
<div class="ss_button">High-End</div>
<div class="ss_content">
<p>Test3</p>
</div>
</div>
答案 0 :(得分:2)
您可以通过几种方式来实现,其中1种可能是
jQuery('.ss_content').eq(1).show();
或者您可以触发第一个ss_button
jQuery('.ss_button').eq(1).click();
演示
jQuery(function() {
jQuery('.ss_button').on('click', function() {
jQuery('.ss_content').not(jQuery(this).next('.ss_content')).slideUp('fast');
jQuery(this).next('.ss_content').slideToggle('fast');
});
jQuery('.ss_content').eq(1).show();
});
#ss_menu {
width: auto;
}
.ss_button {
background-color: #049132;
border-bottom: 1px solid #FFFFFF;
cursor: pointer;
padding: 10px;
margin-bottom: 5px;
color: #FFFFFF;
}
.ss_content {
background-color: white;
display: none;
padding: 10px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="ss_menu">
<div class="ss_button">Einsteiger</div>
<div class="ss_content">
<p>Test1</p>
</div>
<div class="ss_button">Mittelklasse</div>
<div class="ss_content">
<p>Test2</p>
</div>
<div class="ss_button">High-End</div>
<div class="ss_content">
<p>Test3</p>
</div>
</div>
答案 1 :(得分:1)
除了“单击按钮以显示页面加载时”之外,您还可以通过覆盖Dervied
来显示所需的内容。
这还具有以下优点:运行js来设置页面时(尤其是如果有很多js或大页面必须加载才能运行doc.ready时),您将不会获得FOUC(未样式化内容的闪烁) )。
当然,并非在所有情况下都可行,因此可以选择。
display:none
jQuery(function() {
jQuery('.ss_button').on('click', function() {
jQuery('.ss_content').slideUp('fast');
jQuery(this).next('.ss_content').slideDown('fast');
});
});
#ss_menu {
width: auto;
}
.ss_button {
background-color: #049132;
border-bottom: 1px solid #FFFFFF;
cursor: pointer;
padding: 10px;
margin-bottom: 5px;
color: #FFFFFF;
}
.ss_content {
background-color: white;
display: none;
padding: 10px;
}