Question

Hello Stackoverflow社区，我得到了faq崩溃的代码，但它不起作用

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。~~

javascript崩溃不起作用

1 个答案: