Question

所以，我在使用以下代码时遇到了一些问题：

<div class="chat" style="display: none;">
    <input type="text" class="chat-name" placeholder="Enter your name">
    <div class="chat-messages"></div>
    <textarea class="chat-textarea" placeholder="Type your message"></textarea>
    <div class="chat-status">Status: <span>Idle</span></div>
</div>
<div id="showmenu">Click Here</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js"></script>
<script>
    $('#showmenu').click(function() {
        $('.chat').slideToggle("fast");
    });
});
</script>

正如您所看到的，它应该切换.chat div，但它不会。

非常感谢任何帮助！

Answer 1

因为脚本末尾有一个额外的});。删除它，它的工作原理：

<div class="chat" style="display: none;">
    <input type="text" class="chat-name" placeholder="Enter your name">
    <div class="chat-messages"></div>
    <textarea class="chat-textarea" placeholder="Type your message"></textarea>
    <div class="chat-status">Status: <span>Idle</span></div>
</div>
<div id="showmenu">Click Here</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js"></script>
<script>
    $('#showmenu').click(function() {
        $('.chat').slideToggle("fast");
    });
});
</script>

您的浏览器让简单很容易诊断出这样的错误。打开Web控制台，您会看到类似

的错误

未捕获的SyntaxError：意外的令牌}

带有相关行的链接。一般来说，浏览器中内置的全功能调试工具应该是您尝试使用JavaScript代码弄清楚发生了什么（以及出现了什么问题）时的第一站。

Answer 2

您应该删除额外的})

<script>
    $('#showmenu').click(function() {
        $('.chat').slideToggle("fast");
    });
</script>

在DOM准备中包装这种代码是一种很好的做法。

<script>
$(document).ready(function(){
    $('#showmenu').click(function() {
        $('.chat').slideToggle("fast");
    });
});
</script>

Answer 3

使用此

<script>
    $('#showmenu').click(function() {
        $('.chat').slideToggle("fast");
    });
</script>

为什么这个.slideToggle函数在jQuery中不起作用？

3 个答案: