Question

我目前正在尝试使用按钮来实现类似手风琴的小节。如果用户单击一个按钮，则会显示内容。但是我想默认显示第二个按钮的部分。有什么办法吗？

这是我现在的代码：

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>

Answer 1

您可以通过几种方式来实现，其中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>

Answer 2

除了“单击按钮以显示页面加载时”之外，您还可以通过覆盖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;
}

点击页面加载按钮

2 个答案: