JavaScript的崩潰不工作

Question

你好＃1社區， 我得到了常見問題收起這個代碼，但它不工作

HTML

<a href="#" class="togglefaq"><i class="icon-plus"></i> How do you tell an introverted computer scientist from an extroverted computer scientist?</a> 
      <div class="faqanswer"> 
      <p>An extroverted computer scientist looks at <em>your</em> shoes when he talks to you. 
</p> 
    </div> 

<br> 
     <a href="#" class="togglefaq"><i class="icon-plus"></i> How many programmers does it take to change a light bulb?</a> 
      <div class="faqanswer"> 
      <p>None, that's a hardware problem. 
</p> 
    </div> 
<br> 

     <a href="#" class="togglefaq"><i class="icon-plus"></i> What's the object-oriented way to become wealthy?</a> 
      <div class="faqanswer"> 
      <p>Inheritance. 
</p> 
    </div>  
    <br> 

      <a href="#" class="togglefaq"><i class="icon-plus"></i> Why do programmers like UNIX?</a> 
      <div class="faqanswer"> 
      <p>unzip, strip, touch, finger, grep, mount, fsck, more, yes, fsck, fsck, fsck, umount, sleep 
</p> 
    </div> 

CSS

/* FAQ COLLAPSE/EXPAND STYLES */ 
* { 
    box-sizing: border-box; 
} 
body{ 
    background-color:black; 
} 
.faqanswer { 
    display: none; 
    width: 590px; 
    padding: 12px 20px 0 30px; 
    background-color:white; 

} 

.faqanswer p { 
    font-size: 13px; 
    line-height: 17px; 
    padding-bottom: 20px; 
    color:#2b2d39; 

} 


a.active { 
    font-weight: bold; 
} 

.togglefaq { 
    text-decoration: none; 
    color: #2b2d39; 
    font-size: 13px; 
    padding: 10px 30px; 
    line-height: 20px; 
    display: block; 
    width: 590px; 
    margin-bottom: -1px; 
    background-color:white; 
} 
.icon-plus { 
    color: #1c1e2b; 
    margin-right: 20px; 
    font-size: 20px; 
    float:right; 
} 

.icon-remove { 
    color: #1c1e2b; 
    font-size: 20px; 
    float:right; 
} 
p { 
    margin: 0; 
} 

的JavaScript

<script> 
//faq toggle stuff 
$('.togglefaq').click(function(e) { 
e.preventDefault(); 
var notthis = $('.active').not(this); 
notthis.find('.icon-remove ').addClass('icon-plus').removeClass('icon-remove '); 
notthis.toggleClass('active').next('.faqanswer').slideToggle(300); 
$(this).toggleClass('active').next().slideToggle("fast"); 
$(this).children('i').toggleClass('icon-plus icon-remove '); 
}); 
</script> 

在codepen它的工作原理 https://codepen.io/mrs_snow/pen/vEvzaL

但是當我把它添加到我的網站，它不

Answer 1

你需要把它放在一個(function ($) {....})(jQuery)或jQuery(document).ready(function() {...})

(function ($) { 

    $('.togglefaq').click(function(e) { 
    e.preventDefault(); 
    var notthis = $('.active').not(this); 
    notthis.find('.icon-remove ').addClass('icon-plus').removeClass('icon-remove '); 
    notthis.toggleClass('active').next('.faqanswer').slideToggle(300); 
    $(this).toggleClass('active').next().slideToggle("fast"); 
    $(this).children('i').toggleClass('icon-plus icon-remove '); 
    }); 

})(jQuery); 

而且你也得到了引用jQuery。