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

正如评论中所提到的，你的问题是你还没有包含jQuery。

参见示例：

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

错误是

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

将jQuery包括在内：

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

在<head>标记或<body>标记中，它应该可以正常运行。

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

尝试这个

使用toggle

并添加jquery库

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

slideToggle无法使用按钮激活

2 个答案: