内容不显示在切换按钮与jQuery

Question

我创建一个切换按钮与jQuery。我已经从YouTube（lynda.com）观看了关于如何使用jQuery创建切换按钮的教程。我试图复制代码，但“p标签”下的内容不显示。它在教程中完美工作。我不擅长JavaScript。也许你可以看到我错过了什么或者可能是图书馆idk。这是我的代码。先谢谢你。

HTML: 
<div id="toggle"> 
    <div id="poptext"> toggle </div> 
    <div id="box"> 
    <p> hello</p> 
    </div> 
</div> 

CSS: 
#toggle { 
position: fixed; 
bottom: 0px; 
left: 50%; 
width: 240px; 
margin: 0 auto; 
margin-bottom: 10px; 
margin-left: -120px; 
} 

#box { 
margin: 0 auto; 
position: relative; 
margin-bottom: 10px; 
margin-top: 10px; 
border-radius: 19px; 
text-shadow: 0 1px 2px #000; 
background-color: #644d52; 
display: none; 
opacity: .9; 
} 

#box p { 
margin: 0; 
padding: 5px 20px 15px 20px; 
text-align: left; 
color: #FFF; 
} 

#poptext { 
    width: 50px; 
    height: 18px; 
    font-size: 14px; 
    text-align: left; 
    padding-left: 23px; 
    overflow: hidden; 
    cursor: pointer; 
    margin: 0 auto; 
    border-radius: 10px; 
    } 

#poptext.highlight { 
    background: url("images/blue.jpg") no-repeat 5px 18px rgba(255, 128, 0, 0.8); 
} 

JAVASCRIPT: 
<script> 
window.jQuery || document.write('script src=\'jquery.min.js\'></script>'); 
    $(document).ready(function() { 
    $('#poptext').click(function() { 
    $('#poptext').toggleClass('#highlight'); 
    $('#box').animate({ 
     height: 'toggle', 
     opacity: 'toggle', 
     width: 'toggle' 
     }, 500); 
    }); 
}); 
</script> 

Answer 1

有给出won't work这里2个问题，1个追加脚本标签，你需要split it，第二你需要等待脚本加载到执行代码。您可以使用窗口load事件做

document.write('<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></' + 'script>'); 
 
window.addEventListener('load', function() { 
 
    $('#poptext').click(function() { 
 
    $('#poptext').toggleClass('#highlight'); 
 
    $('#box').animate({ 
 
     height: 'toggle', 
 
     opacity: 'toggle', 
 
     width: 'toggle' 
 
    }, 500); 
 
    }); 
 
})

#toggle { 
 
    position: fixed; 
 
    bottom: 0px; 
 
    left: 50%; 
 
    width: 240px; 
 
    margin: 0 auto; 
 
    margin-bottom: 10px; 
 
    margin-left: -120px; 
 
} 
 
#box { 
 
    margin: 0 auto; 
 
    position: relative; 
 
    margin-bottom: 10px; 
 
    margin-top: 10px; 
 
    border-radius: 19px; 
 
    text-shadow: 0 1px 2px #000; 
 
    background-color: #644d52; 
 
    display: none; 
 
    opacity: .9; 
 
} 
 
#box p { 
 
    margin: 0; 
 
    padding: 5px 20px 15px 20px; 
 
    text-align: left; 
 
    color: #FFF; 
 
} 
 
#poptext { 
 
    width: 50px; 
 
    height: 18px; 
 
    font-size: 14px; 
 
    text-align: left; 
 
    padding-left: 23px; 
 
    overflow: hidden; 
 
    cursor: pointer; 
 
    margin: 0 auto; 
 
    border-radius: 10px; 
 
} 
 
#poptext.highlight { 
 
    background: url("images/blue.jpg") no-repeat 5px 18px rgba(255, 128, 0, 0.8); 
 
}

<div id="toggle"> 
 
    <div id="poptext">toggle</div> 
 
    <div id="box"> 
 
    <p>hello</p> 
 
    </div> 
 
</div>