我一直在努力制作像这样的常见问题手风琴风格的副本 here
问题是第一个问题崩溃了，当我点击其他问题时，他们不会打开也不会回复我的任何点击。我该怎么做才能做到这一点？我相信我的JQuery出了点问题。
HTML CODE
<div class="accordion-header active-header">Q: Is this free?</div>
<div class="accordion-content open-content" style="display: block;">
<p>A: Yes, uploading and downloading is 100% Free for all users. We offer PRO accounts which allows for greater flexibility with uploading/downloading.</p>
</div>
<div class="accordion-header inactive-header">Q: Will my files be removed?</div>
<div class="accordion-content">
<p>A: Free/non accounts files are kept for 90 days. PRO accounts files are kept for unlimited days.</p>
</div>
<div class="accordion-header inactive-header">Q: How many files can I upload?</div>
<div class="accordion-content">
<p>A: You can upload as many files as you want, as long as each one adheres to the Terms of Service and the maximum file upload size.</p>
</div>
<div class="accordion-header inactive-header">Q: Which files types am I allowed to upload?</div>
<div class="accordion-content">
<p>A: You may upload the following types of files: Any.</p>
</div>
<div class="accordion-header inactive-header">Q: Are there any restrictions to the size of my uploaded files?</div>
<div class="accordion-content">
<p>A: Each file you upload must be less than 1.00 GB in size for free/non accounts or less than 10.00 GB in size for PRO accounts. If it is greater than that amount, your file will be rejected.</p>
</div>
<div class="accordion-header inactive-header">Q: Can I upload music or videos?</div>
<div class="accordion-content">
<p>A: Yes. Music and video hosting is permitted as long as you own the copyright on the content and it adheres to the terms and conditions.</p>
</div>
<div class="accordion-header inactive-header">Q: There are some files on our servers which may have been subject to copyright protection, how can I notify you of them?</div>
<div class="accordion-content">
<p>A: Via our <a href="report_file.html">report abuse</a> pages.</p>
</div>
<div class="accordion-header inactive-header">Q: Do files have direct links?</div>
<div class="accordion-content">
<p>A: All users are shown a download page so no direct links are available, we may introduce direct link generation in the future.</p>
</div>
CSS代码
.accordion-header {
font-size: 18px;
background: #ebebeb;
margin: 5px 0 0 0;
padding: 14px;
border: 1px solid #D8D8D8;
cursor: pointer;
color: #8E8E8E;
text-align: left;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
.active-header {
-moz-border-radius: 5px 5px 0 0;
-webkit-border-radius: 5px 5px 0 0;
border-radius: 5px 5px 0 0;
background: rgb(96, 168, 227);
background-repeat: no-repeat;
background-position: right 50%;
color: white;
text-shadow: 1px 1px rgb(72, 141, 197);
}
.inactive-header {
background: url(images/inactive-header.gif) #fff;
background-repeat: no-repeat;
background-position: right 50%;
}
.inactive-header:hover {
background: url(images/inactive-header.gif) #f5f5f5;
background-repeat: no-repeat;
background-position: right 50%;
}
.accordion-content {
display: none;
padding: 18px;
width: 100%;
background: #ffffff;
border: 1px solid #cccccc;
border-top: 0;
text-align: left;
-moz-border-radius: 0 0 5px 5px;
-webkit-border-radius: 0 0 5px 5px;
border-radius: 0 0 5px 5px;
}
JS CODE
$(document).ready(function () {
'use strict';
$('.nav').onePageNav({
filter: ':not(.external)'
});
});
jQuery(document).ready(function ($) {
'use strict';
$('.animated').appear(function () {
var elem = $(this);
var animation = elem.data('animation');
if (!elem.hasClass('visible')) {
var animationDelay = elem.data('animation-delay');
if (animationDelay) {
setTimeout(function () {
elem.addClass(animation + " visible");
}, animationDelay);
} else {
elem.addClass(animation + " visible");
}
}
});
});
$(document).ready(function () {
'use strict';
$(window).scroll(function () {
if ($(this).scrollTop() > 100) {
$('.scrollup').fadeIn();
} else {
$('.scrollup').fadeOut();
}
});
$('.scrollup').click(function () {
$("html, body").animate({
scrollTop: 0
}, 600);
return false;
});
});
function showUploaderPopup() {
jQuery('#fileUploadWrapper').modal('show', {
backdrop: 'static'
}).on('shown.bs.modal');
}
function createSlowGauge() {
var opts = {
lines: 12,
angle: 0,
lineWidth: 0.25,
pointer: {
length: 0.9,
strokeWidth: 0.04,
color: '#000000'
},
limitMax: 'true',
colorStart: '#CF0808',
colorStop: '#DA0202',
strokeColor: '#E0E0E0',
generateGradient: true
};
var target = document.getElementById('canvas-slow');
var gauge = new Gauge(target).setOptions(opts);
gauge.maxValue = 100;
gauge.animationSpeed = 128;
gauge.set(9);
}
$(document).ready(function () {
$('.accordion-header').toggleClass('inactive-header');
$('.accordion-header').click(function () {
if ($(this).is('.inactive-header')) {
$('.active-header').toggleClass('active-header').toggleClass('inactive-header').next().slideToggle().toggleClass('open-content');
$(this).toggleClass('active-header').toggleClass('inactive-header');
$(this).next().slideToggle().toggleClass('open-content');
} else {
$(this).toggleClass('active-header').toggleClass('inactive-header');
$(this).next().slideToggle().toggleClass('open-content');
}
});
return false;
});
function createFastGauge() {
var opts = {
lines: 12,
angle: 0,
lineWidth: 0.25,
pointer: {
length: 0.9,
strokeWidth: 0.04,
color: '#000000'
},
limitMax: 'true',
percentColors: [
[0.0, "#000000"],
[0.50, "#cc0000"],
[1.0, "#00cc00"]
],
strokeColor: '#E0E0E0',
generateGradient: true
};
var target = document.getElementById('canvas-fast');
var gauge = new Gauge(target).setOptions(opts);
gauge.maxValue = 100;
gauge.animationSpeed = 128;
gauge.set(100);
}! function ($) {
$(function () {
var $root = $('html, body');
$('.smooth-anchor-link').click(function () {
var href = $.attr(this, 'href');
$root.animate({
scrollTop: $(href).offset().top
}, 500, function () {
window.location.hash = href;
});
return false;
});
})
}(window.jQuery);
以下是JSFiddle示例，如果您知道正确的解决方案，可以尝试更新它：）
PS： 我知道这里还有其他类似的问题，但我尝试了所有这些问题都没有解决我的问题。
答案 0 :(得分：1)
您的代码会引发由Uncaught TypeError: undefined is not a function和onePageNav()引起的错误appear()，这些错误不是官方的javascript / jQuery函数。如果你从其他地方复制它们，它们很可能是外部插件函数。
只需从您的javascript中删除这两个功能即可修复点击问题。 JSFiddle link
请注意，您也不需要在JSFiddle中使用$(document).ready(function ()，它会自动执行此操作。
尝试复制某些内容时，请尝试从头开始构建它。你不会只是复制整个东西就学到任何东西。尝试编写自己的函数，以便了解一切是如何工作的。 The jQuery documentations应该有所帮助。
如果您有兴趣了解Javascript和/或jQuery中的代码，请尝试以下网站：