Question

我在脚本中遇到问题，我在网上下载它，基本上我需要的是一个FAQ问题，在崩溃面板交互，但在这种情况下不同的另一个我想要当我点击一个问题它打开，当我点击另一个问题之前关闭的问题并打开我点击的那个。

它运作良好，但缺少一个细节，如果我点击相同的链接（问题），问题不会折回到正常的正常模式，它唯一可能关闭他选择另一个链接。我希望能够在我选择其他问题并且再次点击同一个问题时关闭问题。

主页中的javascript代码：

<script type="text/javascript">
<!–
  $(function() {
    var $h2;
    var $answer;
    $(‘.answer’).hide();
    $(‘#faq h2′).bind(
        ‘click’,
        function()
        {
            if ($h2 && $h2[0] != this) {
                $answer.slideUp();
                $h2.removeClass(‘open’);
            }
            $h2 = $(this);
            $answer = $h2.next();
            $answer.slideDown();
            $h2.addClass(‘open’);
        }
    )
 });
 –>
</script>

希望得到一些帮助

Answer 1

首先，我重新编写脚本的变量名称，稍微重构一下，并添加注释以尝试使其更清楚：

<script type="text/javascript">
  $(function() { // onReady
    var $lastClickedH2;
    var $currentOpenAnswer;
    $('.answer').hide(); // All answers start hidden
    $(‘#faq h2′).click(function() // When an H2 is clicked
        {
            if ($lastClickedH2 && $lastClickedH2[0] != this) {
                // If there was an answer already open, close it
                $currentOpenAnswer.slideUp();
                $lastClickedH2.removeClass(‘open’);
            }
            // Set the last clicked H2/current open answer variables
            $lastClickedH2 = $(this);
            $currentOpenAnswer = $lastClickedH2.next();
            // Show the answer
            $currentOpenAnswer.slideDown();
            // Add an "open" class to the H2 (not sure why ...)
            $lastClickedH2.addClass(‘open’);
        }
    );
 });
</script>

正如您所希望的那样（希望现在）看到，当您单击已经单击的H2时，它会被关闭（通过代码中位于if中的部分），但之后是代码只是重新打开它。你想要做的是调整一些东西，使它不会重新打开;这是一种方法：

            ...
            if ($lastClickedH2 && $lastClickedH2[0] != this) {
                // If there was an answer already open, close it
                $currentOpenAnswer.slideUp();
                $lastClickedH2.removeClass(‘open’);
            }
            if ($lastClickedH2[0] == this) { // If we clicked on the same H2 twice
                // Unset the last clicked H2/current open answer variables
                $lastClickedH2 = undefined;
                $currentOpenAnswer = undefined;
                // Stop here
                // (Don't go on to the rest of the code, which would re-open it)
                return;
            }
            // Set the last clicked H2/current open answer variables
            $lastClickedH2 = $(this);
            ...

该代码应该可以工作，但是它没有经过测试（所以如果有错误就不要感到惊讶）;希望它有所帮助。

Jquery关闭点击

1 个答案: