Question

this.faqLogic = function()
{
    $('a .toggle').click(function(){
        $('this .answer').show();
    });
};

HTML：

<li class="clearfix question">
    <a class="toggle" href="#">>
        <h3>
            QUESTION
        </h3>
    </a>
    <div id="answer_1" class="answer">
        <h6>
            <span>ANSWER</span>
        </h6>
    </div>
</li>

当然，有多个问题/答案。我只是无法理解为什么它根本不起作用。我没有得到任何错误，并且首先安装并调用了所需的依赖项（jquery）。

有什么想法吗？

Answer 1

绑定事件的选择器应为a.toggle（a和.toggle之间没有空格）
使用next()获取具有课程answer的下一个元素。

<强>演示

＆＃13;

$('a.toggle').click(function() {
  $(this).next('.answer').toggle();
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<li class="clearfix question">
  <a class="toggle" href="#">
    <h3>
      QUESTION
    </h3>
  </a>
  <div id="answer_1" class="answer">
    <h6>
      <span>ANSWER</span>
    </h6>
  </div>
</li>

＆＃13;

Answer 2

因为您尝试选择.answer元素的子类<this>的元素。显然你没有<this>元素。

此外，由于a .toggle之间有空格，因此您选择.toggle元素的 children 类的a类元素。您希望a元素具有类.toggle。没有该选择器的空间，因此它将是a.toggle。

总而言之，也许你的意思是：

$('a.toggle').click(function(){
    $('.answer').show();
});

我建议您阅读CSS选择器的工作原理。你的理解可以做一点点坚定。

Answer 3

＆＃13;

    $('.toggle').click(function(){
        $(this).next().toggle();
    });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<li class="clearfix question">
    <a class="toggle" href="#">
        <h3>
            QUESTION
        </h3>
    </a>
    <div id="answer_1" class="answer">
        <h6>
            <span>ANSWER</span>
        </h6>
    </div>
</li>

＆＃13;

点击标题不会显示其答案（常见问题解答）

3 个答案: