常见问题解答的多级菜单

Question

我正在制作一个常见问题解答，询问您 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;
}

Answer 1

在按钮上添加目标属性：

<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'));
});

Answer 2

要缩短这段代码：

$('#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-", ""));
});