javascript - 内容不会显示在 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

这里有 2 个问题，1 个附加脚本标签给定 won't work , 你需要 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>