单击页面加载上的按钮

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

你可以用几种方式来做，我可以：

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

作为“单击按钮显示页面加载”的替代，您可以通过重写display:none来显示所需的内容。

这也有一个额外的好处，就是在运行js来设置页面时(特别是如果有大量js或必须在doc.ready运行之前加载的大页面)，就没有FOUC (非样式内容的闪存)。

当然，这在所有情况下都是不可能的，因此可以作为一种替代办法。

​

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" style='display:block;'>
    <p>Test2</p>
  </div>
  <div class="ss_button">High-End</div>
  <div class="ss_content">
    <p>Test3</p>
  </div>

</div>

​