常见问题解答的多级菜单
Multi-level menu for an FAQ
我正在做一个常见问题解答,问你 3 个问题给你正确的答案。它的工作方式与本网站相同:Nokia Lumia FAQ.
代码有效。根据您按下的按钮,您可以查看 3 级内容。当在第 1 级、第 2 级和第 3 级按下按钮时,它会改变颜色,因此您以三个颜色改变的按钮结束,这样更容易理解您需要帮助,例如:Phone - Andriod - Simcard 帮助。
请注意,第 1 级和第 2 级内容在 JS 代码中有很多相似之处,但第 3 级有点不同,因为当内容显示时,您的浏览器会将您向下滚动。而且 3 级确实有超链接而不是按钮。
我必须手动复制此 JS 代码的一部分以添加新按钮,我认为可以有更简单的方法。非常感谢任何帮助。
这是JS:
$(document).ready(function(){
// Level 1
function show(sel) {
var el = $(sel);
el.fadeToggle();
$('.showmore-1').not(el).fadeOut("slow");
}
$('.showmore-1').hide();
$('.click-1').click(function(){
$('.click-1').removeClass('clickcolor')
$(this).addClass('clickcolor');
});
$('#click-1a').click(function () {
show('#showmore-1a');
});
$('#click-1b').click(function () {
show('#showmore-1b');
});
$('#click-1c').click(function () {
show('#showmore-1c');
});
// Level 2
function show(sel) {
var el = $(sel);
el.fadeToggle();
$('.showmore-2').not(el).fadeOut("slow");
}
$('.showmore-2').hide();
$('.click-2').click(function(){
$('.click-2').removeClass('clickcolor')
$(this).addClass('clickcolor');
});
$('#click-2a').click(function () {
show('#showmore-2a');
});
$('#click-2b').click(function () {
show('#showmore-2b');
});
$('#click-2c').click(function () {
show('#showmore-2c');
});
// Level 3
function show(sel) {
var el = $(sel);
el.fadeToggle();
$('.showmore-3').not(el).fadeOut("slow");
}
$('.showmore-3').hide();
$('.click-3').click(function(){
$('.click-3').removeClass('clickcolortext') //Level 3 display text instead of button to be pressed and therefore another class of color.
$(this).addClass('clickcolortext');
});
$('#click-3a').click(function () {
show('#showmore-3a');
$('html, body').scrollTop($('#showmore-3a').offset().top);
return false;
});
$('#click-3b').click(function () {
show('#showmore-3b');
$('html, body').scrollTop($('#showmore-3b').offset().top);
return false;
});
$('#click-3c').click(function () {
show('#showmore-3c');
$('html, body').scrollTop($('#showmore-3c').offset().top);
return false;
});
});
enter code here
这是HTML
的一部分
<button class="click-1" id="click-1a">Mobile</button>
<button class="click-1" id="click-1b">PC</button>
<button class="click-1" id="click-1c">Tablet</button>
<div id="showmore-1a" class="showmore-1">View content for mobile help</div>
<div id="showmore-1b" class="showmore-1">View content for pc help</div>
<div id="showmore-1c" class="showmore-1">View content for tablet help</div>
enter code here
这里是CSS
.clickcolor {
background-color: #4d4d4d !important;
}
.clickcolortext {
color: #4d4d4d !important;
}
要缩短这段代码:
$('#click-1a').click(function () {
show('#showmore-1a');
});
$('#click-1b').click(function () {
show('#showmore-1b');
});
$('#click-1c').click(function () {
show('#showmore-1c');
});
嗯,我可以这么说:
$('[id^="click-"]').click(function () {
show('#showmore-' + this.id.replace("click-", ""));
});
在按钮上添加目标属性:
<button class="click-1" id="click-1a" data-target="#showmore-1a">Mobile</button>
<button class="click-1" id="click-1b" data-target="#showmore-1b">PC</button>
<button class="click-1" id="click-1c" data-target="#showmore-1c">Tablet</button>
JS
$('button.click-1').click(function(){
$('.click-1').removeClass('clickcolor')
$(this).addClass('clickcolor');
show($(this).data('target'));
});
我正在做一个常见问题解答,问你 3 个问题给你正确的答案。它的工作方式与本网站相同:Nokia Lumia FAQ.
代码有效。根据您按下的按钮,您可以查看 3 级内容。当在第 1 级、第 2 级和第 3 级按下按钮时,它会改变颜色,因此您以三个颜色改变的按钮结束,这样更容易理解您需要帮助,例如:Phone - Andriod - Simcard 帮助。
请注意,第 1 级和第 2 级内容在 JS 代码中有很多相似之处,但第 3 级有点不同,因为当内容显示时,您的浏览器会将您向下滚动。而且 3 级确实有超链接而不是按钮。
我必须手动复制此 JS 代码的一部分以添加新按钮,我认为可以有更简单的方法。非常感谢任何帮助。
这是JS:
$(document).ready(function(){
// Level 1
function show(sel) {
var el = $(sel);
el.fadeToggle();
$('.showmore-1').not(el).fadeOut("slow");
}
$('.showmore-1').hide();
$('.click-1').click(function(){
$('.click-1').removeClass('clickcolor')
$(this).addClass('clickcolor');
});
$('#click-1a').click(function () {
show('#showmore-1a');
});
$('#click-1b').click(function () {
show('#showmore-1b');
});
$('#click-1c').click(function () {
show('#showmore-1c');
});
// Level 2
function show(sel) {
var el = $(sel);
el.fadeToggle();
$('.showmore-2').not(el).fadeOut("slow");
}
$('.showmore-2').hide();
$('.click-2').click(function(){
$('.click-2').removeClass('clickcolor')
$(this).addClass('clickcolor');
});
$('#click-2a').click(function () {
show('#showmore-2a');
});
$('#click-2b').click(function () {
show('#showmore-2b');
});
$('#click-2c').click(function () {
show('#showmore-2c');
});
// Level 3
function show(sel) {
var el = $(sel);
el.fadeToggle();
$('.showmore-3').not(el).fadeOut("slow");
}
$('.showmore-3').hide();
$('.click-3').click(function(){
$('.click-3').removeClass('clickcolortext') //Level 3 display text instead of button to be pressed and therefore another class of color.
$(this).addClass('clickcolortext');
});
$('#click-3a').click(function () {
show('#showmore-3a');
$('html, body').scrollTop($('#showmore-3a').offset().top);
return false;
});
$('#click-3b').click(function () {
show('#showmore-3b');
$('html, body').scrollTop($('#showmore-3b').offset().top);
return false;
});
$('#click-3c').click(function () {
show('#showmore-3c');
$('html, body').scrollTop($('#showmore-3c').offset().top);
return false;
});
});
enter code here
这是HTML
的一部分<button class="click-1" id="click-1a">Mobile</button>
<button class="click-1" id="click-1b">PC</button>
<button class="click-1" id="click-1c">Tablet</button>
<div id="showmore-1a" class="showmore-1">View content for mobile help</div>
<div id="showmore-1b" class="showmore-1">View content for pc help</div>
<div id="showmore-1c" class="showmore-1">View content for tablet help</div>
enter code here
这里是CSS
.clickcolor {
background-color: #4d4d4d !important;
}
.clickcolortext {
color: #4d4d4d !important;
}
要缩短这段代码:
$('#click-1a').click(function () {
show('#showmore-1a');
});
$('#click-1b').click(function () {
show('#showmore-1b');
});
$('#click-1c').click(function () {
show('#showmore-1c');
});
嗯,我可以这么说:
$('[id^="click-"]').click(function () {
show('#showmore-' + this.id.replace("click-", ""));
});
在按钮上添加目标属性:
<button class="click-1" id="click-1a" data-target="#showmore-1a">Mobile</button>
<button class="click-1" id="click-1b" data-target="#showmore-1b">PC</button>
<button class="click-1" id="click-1c" data-target="#showmore-1c">Tablet</button>
JS
$('button.click-1').click(function(){
$('.click-1').removeClass('clickcolor')
$(this).addClass('clickcolor');
show($(this).data('target'));
});