Я хотел бы открыть за раз одну таблицу показать / скрыть плюс минус

 $(document).ready(function() {
        $("#t1").hide(); // hide table by default
        $("#close").hide(); //hide the minus button as well if you only want one button to display at a time

  $('#sp1').on('click', function() { //when plus button is clicked
    $("#t1").show(); 
    $("#sp1").hide(); //you need to hide the plus button now
    $("#close").show(); //and then display the minus button
  });
  $('#close').on('click', function() { 
    $("#t1").hide(); //hide table
    $("#close").hide(); //hide minus btn
    $("#sp1").show(); //show plus button
  });
});
 $(document).ready(function() {
  $("#t2").hide(); // hide table by default
  $('#sp2').on('click', function() {
       toggleButtons(true);
    $("#t2").show();
  });
  $('#close2').on('click', function() {
       toggleButtons(false)
    $("#t2").hide();
  });
      function toggleButtons(show) {
      if (show) {
        $("#sp2").hide();
        $("#close2").show();
      } else {
        $("#sp2").show();
        $("#close2").hide();
      }
  }
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<link href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" rel="stylesheet"/>
<link href="https://pro.fontawesome.com/releases/v5.10.0/css/fontawesome.css" rel="stylesheet"/>

<div class="col-md-12 col-12 table-responsive">
  <div class="form-group">
    <div class="col-md-12" style="padding: 10px !important;" align="center">
      <div class="form-group">Main heading</div>
    </div>
<table class="table table-hover">
      <thead class="lbbg3">
        <tr>
          <td style="width: 800px;">Sub heading 1</td>
          <td>Sub heading 2</td>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th style="background: #eef7fc; text-align: left;" colspan="2">
            <button class="table-plus-btn table1" id="sp1"><i class="fa fa-plus"></i></button><button class="table-minus-btn" id="close"><i class="fa fa-minus"></i></button> Child Heading
          </th>
        </tr>
        <tr>
          <td colspan="2">
            <div class="table1shw">
              <table class="table1 table-hover" id="t1">
                <tr>
                  <td style="text-align: left; width: 800px;">
                    Row 1
                  </td>
                  <td style="text-align: center;">
                    <div class="custom-control custom-radio radio-table">
                      <a href="#doc">
                        <input type="radio" id="customRadio50" name="customRadio" class="custom-control-input fcy edu docbtn" />
                        <label class="custom-control-label" for="customRadio50" style="cursor: pointer;" onchange="valueChanged()"></label>
                      </a>
                    </div>
                  </td>
                </tr>
                <tr>
                  <td style="text-align: left; width: 800px;">
                    Row 2
                  </td>
                  <td style="text-align: center;">
                    <div class="custom-control custom-radio radio-table">
                      <input type="radio" id="customRadio51" name="customRadio" class="custom-control-input fcy" />
                      <label class="custom-control-label" for="customRadio51" style="cursor: pointer;"></label>
                    </div>
                  </td>
                </tr>
              </table>
            </div>
          </td>
        </tr>
           <tr>
          <th style="background: #eef7fc; text-align: left;" colspan="2">
            <button class="table-plus-btn table1" id="sp2"><i class="fa fa-plus"></i></button><button class="table-minus-btn" id="close2"><i class="fa fa-minus"></i></button> Child Heading2
          </th>
        </tr>
        <tr>
          <td colspan="2">
            <div class="table1shw">
              <table class="table1 table-hover" id="t2">
                <tr>
                  <td style="text-align: left; width: 800px;">
                    Row 3
                  </td>
                  <td style="text-align: center;">
                    <div class="custom-control custom-radio radio-table">
                      <a href="#doc">
                        <input type="radio" id="customRadio50" name="customRadio" class="custom-control-input fcy edu docbtn" />
                        <label class="custom-control-label" for="customRadio50" style="cursor: pointer;" onchange="valueChanged()"></label>
                      </a>
                    </div>
                  </td>
                </tr>
                <tr>
                  <td style="text-align: left; width: 800px;">
                    Row 4
                  </td>
                  <td style="text-align: center;">
                    <div class="custom-control custom-radio radio-table">
                      <input type="radio" id="customRadio51" name="customRadio" class="custom-control-input fcy" />
                      <label class="custom-control-label" for="customRadio51" style="cursor: pointer;"></label>
                    </div>
                  </td>
                </tr>
              </table>
            </div>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

Привет, я не могу решить, как отобразить одну таблицу после нажатия кнопки «плюс». Прямо сейчас я могу открыть оба стола. Мне нужно видеть по одному, если я нажимаю на одну таблицу, другая должна уйти. Вся таблица будет отображаться правильно. Этот я записал на аккордеоне, но здесь мне не повезло. так что пожалуйста помогите

# bootstrap-4
Источник
  • 0
    Вы имеете в виду, что хотите, чтобы одновременно отображалась только одна таблица?
  • 0
    да, мне нужно время от времени отображать одну таблицу, а не обе, сейчас я вижу обе таблицы.
Codelisting
за 2 против

Поскольку вы используете bootstrap, вам действительно следует подумать, как сделать свой код более пригодным для повторного использования (и немного более читабельным, хотя по большей части вы хорошо с ним справились). Я переписал часть вашего кода только для того, чтобы продемонстрировать концепцию (скрыть все элементы перед отображением того, по которому щелкнули) ... Мне было слишком лень пытаться проанализировать ваш код, чтобы разобраться со всем этим.

$(document).ready(function() {
        $(".allcontent").hide(); // hide table by default
        $(".hide").hide(); //hide the minus button as well if you only want one button to display at a time
        
        $('.show').on('click', function() {
          $('.allcontent').hide();
          $('.show').show();
          $('.hide').hide();
          $(this).parent().find('.show').hide();
          $(this).parent().find('.hide').show();
          $(this).parent().parent().find('.allcontent').show();
        });

        $('.hide').on('click', function() {
          $(this).parent().find('.show').show();
          $(this).parent().find('.hide').hide();
          $(this).parent().parent().find('.allcontent').hide();
        });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="main-container">

  <div class="1st">
  
    <div class="2nd">
      <button class="show">
        +
      </button>
      <button class="hide">
        -
      </button>
    </div>

    <table class="table1 table-hover allcontent">
      <tr>
        <td style="text-align: left; width: 800px;">
         Row 1
        </td>
        <td style="text-align: center;">
          <div class="custom-control custom-radio radio-table">
            <a href="#doc">
             <input type="radio" id="customRadio50" name="customRadio" class="custom-control-input fcy edu docbtn" />
            <label class="custom-control-label" for="customRadio50" style="cursor: pointer;" onchange="valueChanged()">
            </label>
           </a>
         </div>
        </td>
      </tr>
      <tr>
        <td style="text-align: left; width: 800px;">
         Row 2
        </td>
        <td style="text-align: center;">
          <div class="custom-control custom-radio radio-table">
            <input type="radio" id="customRadio51" name="customRadio" class="custom-control-input fcy" />
            <label class="custom-control-label" for="customRadio51" style="cursor: pointer;">
            </label>
          </div>
        </td>
      </tr>
    </table>
    
  </div>
  
  <div class="1st">
  
    <div class="2nd">
      <button class="show">
        +
      </button>
      <button class="hide">
        -
      </button>
    </div>
    
    <table class="table1 table-hover allcontent">
      <tr>
        <td style="text-align: left; width: 800px;">
          Row 3
        </td>
        <td style="text-align: center;">
          <div class="custom-control custom-radio radio-table">
            <a href="#doc">
              <input type="radio" id="customRadio50" name="customRadio" class="custom-control-input fcy edu docbtn" />
              <label class="custom-control-label" for="customRadio50" style="cursor: pointer;" onchange="valueChanged()"></label>
            </a>
          </div>
        </td>
      </tr>
      <tr>
        <td style="text-align: left; width: 800px;">
          Row 4
        </td>
        <td style="text-align: center;">
          <div class="custom-control custom-radio radio-table">
            <input type="radio" id="customRadio51" name="customRadio" class="custom-control-input fcy" />
            <label class="custom-control-label" for="customRadio51" style="cursor: pointer;"></label>
          </div>
        </td>
      </tr>
    </table>
    
  </div>
  
</div>

РЕДАКТИРОВАТЬ:

Возможно, есть несколько способов сделать алгоритм более эффективным. Например, в нынешнем виде код работает следующим образом:

  1. нажата кнопка.
  2. получить все разборные элементы.
  3. скрыть все элементы.
  4. показать выбранный элемент.

Простым изменением алгоритма было бы добавление «активного» класса. Это означало бы, что алгоритму не пришлось бы обходить все элементы. Что бы эффективно выглядело:

  1. нажата кнопка.
  2. получить активный элемент, удалить «активный» класс и скрыть его.
  3. добавьте «активный» класс к новому элементу и покажите его.
Codelisting
Популярные категории
На заметку программисту