slideToggle 不适用于按钮激活

Question

我去掉了所有的 CSS 和额外的 HTML 并留下了一个简单的 jsFiddle 框架，这表明我无法让它工作：http://jsfiddle.net/95vme63e/

<div class="sectionHeader1"> 
  <div>
    <p class="sectionTitle"> 1: Description </p> 
    <button type="button" class="sectionButton questioner">Button</button>
    <div class="questions">
      <ul>
        <li> Question one </li>
        <li> Question two </li>
      </ul>
  </div>
</div>

$(".questioner").on("click", function () {
  $(".questions").slideToggle(500);
});

.sectionHeader1 .questions {
    display: none;
    float: left;
    width: 100%;
}

我想单击一个按钮来切换一组问题是否可见。目前，单击该按钮似乎没有任何作用。最初我有很多 CSS 和额外的 HTML 元素，我认为这一定是有贡献的，但我已经删除了几乎所有我认为不重要的东西，问题仍然存在。

如果有人能指出我的错误或提供任何建议，那将是很好的，谢谢！

Answer 1

试试这个

使用 toggle

并添加jquery库

$(".sectionButton").on("click", function() {
  $(".questions").toggle();
});

.sectionHeader1 .questions {
  display: none;
  float: left;
  width: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="sectionHeader1">
  <div>
    <p class="sectionTitle"> 1: Description </p>
    <button type="button" class="sectionButton questioner">Button</button>
    <div class="questions">
      <ul>
        <li> Question one </li>
        <li> Question two </li>
      </ul>
    </div>
  </div>

Answer 2

如评论中所述，您的问题是您没有包含 jQuery。

参见示例：

$(".questioner").on("click", function () {
  $(".questions").slideToggle(500);
});

.sectionHeader1 .questions {
    display: none;
    float: left;
    width: 100%;
}

<div class="sectionHeader1"> 
  <div>
    <p class="sectionTitle"> 1: Description </p> 
    <button type="button" class="sectionButton questioner">Button</button>
    <div class="questions">
      <ul>
        <li> Question one </li>
        <li> Question two </li>
      </ul>
  </div>
</div>

错误是

这是通过查看控制台日志（在开发人员工具中）揭示的

包括 jQuery 把这个:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

在 <head> 标签或 <body> 标签中，它应该可以完美地工作。

$(".questioner").on("click", function () {
  $(".questions").slideToggle(500);
});

.sectionHeader1 .questions {
    display: none;
    float: left;
    width: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="sectionHeader1"> 
  <div>
    <p class="sectionTitle"> 1: Description </p> 
    <button type="button" class="sectionButton questioner">Button</button>
    <div class="questions">
      <ul>
        <li> Question one </li>
        <li> Question two </li>
      </ul>
  </div>
</div>

slideToggle 不适用于按钮激活

slideToggle not working with button activation

html

jquery

slidetoggle