Question

我正在尝试添加一个小的“触发器”，点击后会打开。它过去曾经工作过，但我不确定现在究竟是什么问题。

我已经学习了一些HTML和CSS，所以我理解这些部分正在发生什么，但我几乎不知道Javascript。所以脚本选择器中的所有内容对我来说都是新的;其他人在线提供它，我正在努力理解它。阅读语法，我想我知道发生了什么，但我仍然不知道究竟是什么问题。

这是我的代码。是的，它全部在1个HTML文件中，因为这只是1页。

<!DOCTYPE html>
<html>
<head>
<title> This is the Title </title>
<style type="text/css">
html, body { color:#666; font:"Times New Roman", Times, serif; }
        h1 { font-size:36px; color:#333; margin:0 0 15px 0; padding:0 0 15px 0; border-bottom: solid 1px #e1e1e1; }
        .awesomeBox { border:solid 1px #cacaca; box-shadow: 0 0 3px #bbb; padding:15px; margin:20px; width:400px; }
        .trigger { cursor:pointer; }

        /* this is all you need to make the hidden box hidden :) */
        .hiddenBox { display:none; }

        /* we put a little style to the trigger */
        .box { position:relative; }
        .box .trigger { font-size:12px; background:#cacaca; padding:5px 10px; color:#fff; text-decoration:none; position:absolute; bottom:-42px; right:0; }
        .box .hiddenBox { background:#f9f9f9; color:#000; padding:10px; margin:10px; }
</style>

<script src = "//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>

$(function() { 

            $(".trigger").on("click", function() { 
                $(".hiddenBox").toggle();                                                   
            });             
        });
</script>

</head>

<body>
<div class="awesomeBox">

    <h1 class="trigger">Le awesome Page</h1>

    <div class="box">The area where you could type a lot of text but also want to hide some text<br>

        <p>So, user will press the read more button.</p> <a href="#" class="trigger">Read more &raquo;</a> 

        <div class="hiddenBox"> 

            <p>A lot of text in this hidden box and ...
            a lot 
            alot more
            fsdfsd
            </p>

            <img src="https://www.google.com/images/srpr/logo4w.png" width="100%" /> 
       </div>             
    </div>        
</div>    
</body>
</html>

Answer 1

它对我来说很好，请看这里：http://jsfiddle.net/Ex6pK/

尝试在Google Chrome中查看此页面，右键单击可见页面的任何部分，然后检查元素，在那里查找Javascript错误。

我怀疑也许

    $(function() { 

        $(".trigger").on("click", function() { 
            $(".hiddenBox").toggle();                                                   
        });             
    });

在加载Jquery之前调用

无法打开触发器框

1 个答案: