嵌入单选按钮

Question

我想在单选按钮中嵌入单选按钮，如下所示：https://jsfiddle.net/xa6ow1jq/

小提琴的行为与我想要的完全一样，但是它似乎只是针对2x3网格的很多代码，我计划至少有一个3xN网格（每层3个N个按钮，N为至少10，但如果用户继续滚动则更多... ...所以我想知道是否有人知道/可以想到更有效的方法来做到这一点。 （使用php和/或javascript和/或jquery和/或jquery UI）

（我是一个javascript＆amp; jquery noob，目前（自我）从昨天开始学习它，所以如果你对技术术语温和并给出尽可能多的解释，我会很感激。）

提前致谢。

小提琴中的javascript代码：

// main buttons
$(document).ready(function(){
    $(".ap").click(function(){
        $(".a").toggle();
        $(".b").hide();
        $(".c").hide();
        $(".a.l").hide();
    });
});

$(document).ready(function(){
    $(".bp").click(function(){
        $(".a").hide();
        $(".b").toggle();
        $(".c").hide();
        $(".b.l").hide();
    });
});

$(document).ready(function(){
    $(".cp").click(function(){
        $(".a").hide();
        $(".b").hide();
        $(".c").toggle();
        $(".c.l").hide();
    });
});

//secondary buttons
//a
$(document).ready(function(){
    $(".a1").click(function(){
        $(".a1.l").toggle();
        $(".a2.l").hide();
        $(".a3.l").hide();
    });
});
$(document).ready(function(){
    $(".a2").click(function(){
        $(".a1.l").hide();
        $(".a2.l").toggle();
        $(".a3.l").hide();
    });
});
$(document).ready(function(){
    $(".a3").click(function(){
        $(".a1.l").hide();
        $(".a2.l").hide();
        $(".a3.l").toggle();
    });
});
//b
$(document).ready(function(){
    $(".b1").click(function(){
        $(".b1.l").toggle();
        $(".b2.l").hide();
        $(".b3.l").hide();
    });
});
$(document).ready(function(){
    $(".b2").click(function(){
        $(".b1.l").hide();
        $(".b2.l").toggle();
        $(".b3.l").hide();
    });
});
$(document).ready(function(){
    $(".b3").click(function(){
        $(".b1.l").hide();
        $(".b2.l").hide();
        $(".b3.l").toggle();
    });
});
//c
$(document).ready(function(){
    $(".c1").click(function(){
        $(".c1.l").toggle();
        $(".c2.l").hide();
        $(".c3.l").hide();
    });
});
$(document).ready(function(){
    $(".c2").click(function(){
        $(".c1.l").hide();
        $(".c2.l").toggle();
        $(".c3.l").hide();
    });
});
$(document).ready(function(){
    $(".c3").click(function(){
        $(".c1.l").hide();
        $(".c2.l").hide();
        $(".c3.l").toggle();
    });
});

Answer 1

在下面构建你的html，这样你可以处理3xN行，你需要弹出javascript中显示的数组为// here并且你的HTML相应地实现，

$(document).ready(function() {

  var groups = ['a', 'b', 'c'];
    // creating simple js array too use for DOM manipulation

  $.each(groups, function(k, id) {
      // loops groups array we just created id variable contains a, b and then c
    $('#' + id).hide();
      // will evaluate as $('#a').hide();
    $('#' + id + 'l').hide();
      // will evaluate as $('#al').hide();
  });

  $(".button").click(function() {
    // bind click event on DOM items having class name as 'button'

    var button_id = $(this).data('id'); 
      /* $(this) will get us which button has been clicked, every 
      time click event occurs on DOM items having button class 
      and $(this).data(id); will get us clicked button's data-id attribute */

    $('#' + button_id).toggle(); // toogle

    var hide = $.grep(groups, function(value) { 
      // http://api.jquery.com/jquery.grep/
      return value != button_id;
    });

    $.each(hide, function(k, id) {
      // http://api.jquery.com/each/
      $('#' + id).hide();
    });

  });

  var selector = []; // initialize blank array

  $.each(groups, function(k) {
    selector.push('.' + groups[k]); 
      /* push groups array's elements with an extra .
      so, .a .b and .c */

  });

    // join array elements with ,
  selector = selector.join(',');
    // now selector is string, having value .a,.b,.c
    // https://api.jquery.com/category/selectors/

  $(selector).click(function() {
    // binding an event to the string we just created, follow the link above to get more idea

    var button_id = $(this).data('id'); // clicked button's data-id attribute
    var class_id = $(this).attr('class'); // clicked button's class

    var flag = $('.' + class_id + 'l').filter('[data-id="' + button_id + '"]').is(':visible');
      /* for later use, will be true if elements with matched filter conditions is visible in DOM,
      false otherwise */

    $.each(groups, function(k, id) {
      $('#' + id + 'l').children().hide();
        // https://api.jquery.com/children/
    });

    $.each(groups, function(k, id) {
      $('#' + id + 'l').hide();
    });

    $('#' + class_id + 'l').show();

    if (flag)
      $('.' + class_id + 'l').filter('[data-id="' + button_id + '"]').hide();
    else
      $('.' + class_id + 'l').filter('[data-id="' + button_id + '"]').show();
  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="button" data-id="a">Toggle a</button>
<button class="button" data-id="b">Toggle b</button>
<button class="button" data-id="c">Toggle c</button>

<div id="a">
  <div class="a" data-id="1"><button>Toggle a1</button></div>
  <div class="a" data-id="2"><button>Toggle a2</button></div>
  <div class="a" data-id="3"><button>Toggle a3</button></div>
</div>

<div id="b">
  <div class="b" data-id="1"><button>Toggle b1</button></div>
  <div class="b" data-id="2"><button>Toggle b2</button></div>
  <div class="b" data-id="3"><button>Toggle b3</button></div>
</div>

<div id="c">
  <div class="c" data-id="1"><button>Toggle c1</button></div>
  <div class="c" data-id="2"><button>Toggle c2</button></div>
  <div class="c" data-id="3"><button>Toggle c3</button></div>
</div>

<div id="al">
  <div class="al" data-id="1">this is line a1</div>
  <div class="al" data-id="2">this is line a2</div>
  <div class="al" data-id="3">this is line a3</div>
</div>

<div id="bl">
  <div class="bl" data-id="1">this is line b1</div>
  <div class="bl" data-id="2">this is line b2</div>
  <div class="bl" data-id="3">this is line b3</div>
</div>

<div id="cl">
  <div class="cl" data-id="1">this is line c1</div>
  <div class="cl" data-id="2">this is line c2</div>
  <div class="cl" data-id="3">this is line c3</div>
</div>