Как построить «тумблер» с помощью кнопок начальной загрузки группы?один на другом выключен и наоборот

Question

Мне нужны две кнопки (кнопки используются для переключения между двумя разборными элементами), которые по умолчанию отключены, и если одна из них включена, другая (если ранее включена) выключится.Я использую текущую версию bootstrap.min.css и bootstrap.min.js плюс мой файл JavaScript, в котором я написал:

 $('#1kgbtn').on('click', function () {
 $('#25kgpack').collapse('hide')
 if ($('#25kgbtn').button('active') == true) {
   $('#25kgbtn').button('toggle')
 }
 else {}
 })
 $('#25kgbtn').on('click', function () {
 $('#1kgpack').collapse('hide')
 if ($('#1kgbtn').button('active') == true) {
   $('#1kgbtn').button('toggle')
 }
 else {}
 })

, и мой HTML-код выглядит так:

<div class="btn-group btn-group-toggle" data-toggle="buttons">
 <button class="btn btn-outline-primary" id="1kgbtn" type="button" data-toggle="collapse" data-target="#1kgpack" aria-expanded="false" aria-controls="collapseExample" aria-pressed="false" autocomplete="off">
  1kg package
</button>

<button class="btn btn-outline-primary" id="25kgbtn" type="button" data-toggle="collapse" data-target="#25kgpack" aria-expanded="false" aria-controls="collapseExample" aria-pressed="false" autocomplete="off">
  2.5kg package
</button>
</div>

но написанный мной JavaScript не работает правильно, работает только сворачивающаяся часть, переключение кнопок не работает.

(Я не хочу использовать радио, потому что это не работает срушится, ну не для меня по крайней мере)

Спасибо в ожидании

Answer 1

Я решил эту проблему, удалив атрибут data-toggle и управляя переключением с помощью Javascript.Каждая кнопка вызывает функцию toggleBtnActiveState и передает ей два параметра:

1) Идентификатор нажатой кнопки.
2) Идентификатор скрытого div

<button type="button" 
        id="dvdBtn"
        name="dvdBtn"  
        class="extra-attrib-btn btn btn-outline-info btn-default mx-1"
        onclick="toggleBtnActiveState('dvdBtn', 'dvdInput')">
  DVD
</button>

<button type="button" 
        id="bookBtn"
        name="bookBtn" 
        class="extra-attrib-btn btn btn-outline-info btn-default mx-1"
        onclick="toggleBtnActiveState('bookBtn', 'bookInput')">
  Book
</button>

<button type="button" 
        id="furnitureBtn"
        name="furnitureBtn" 
        class="extra-attrib-btn btn btn-outline-info btn-default mx-1"
        onclick="toggleBtnActiveState('furnitureBtn', 'furnitureInput')">
 Furniture
</button>

Функция Javascript работает следующим образом:

function toggleBtnActiveState(buttonId, divId)
{
    activeButton = document.getElementById(buttonId);

    hiddenDivs = document.querySelectorAll('.hidden-div');
    btns = document.querySelectorAll('.extra-attrib-btn');

    //Remove .active class for each btn
    Array.prototype.forEach.call(btns, function(btn)
    {
        removeClass(btn, 'active');
    })

    //Collapsable div show/hide logic
    Array.prototype.forEach.call(hiddenDivs, function(div) 
    {

        //If hidden div matches selected btn and is visible, hide it and selected btn active class
        if (div.id == divId && hasClass(div, 'show')) {
            removeClass(div, 'show');
            removeClass(activeButton, 'active');
            return;
        }
        // If it matches but is not visible, show it and btn active class
        if (div.id == divId && !hasClass(div, 'show'))
        {
            addClass(div, 'show');
            addClass(activeButton, 'active')
            return;
        }

        //This gets called if previous two statements are not, and removes visibility of the div
        if (hasClass(div, 'show')) {
            removeClass(div, 'show');

        }
    })
}

Вспомогательные классы:

function hasClass(el, className) {
    if (el.classList)
        return el.classList.contains(className)
    else
        return !!el.className.match(new RegExp('(\\s|^)' + className + '(\\s|$)'))
}

function addClass(el, className) {
    if (el.classList)
        el.classList.add(className)
    else if (!hasClass(el, className)) el.className += " " + className
}

function removeClass(el, className) {
    if (el.classList)
        el.classList.remove(className)
    else if (hasClass(el, className)) {
        var reg = new RegExp('(\\s|^)' + className + '(\\s|$)')
        el.className = el.className.replace(reg, ' ')
    }
}

Answer 2

Если я правильно понимаю вопрос, вы хотите просто переключать кнопки вроде переключателей без использования переключателей.

Вы можете установить этот код ниже сценария начальной загрузки, чтобы отменить любые значения по умолчанию в файле после его прочтения.HTML читается сверху вниз, поэтому ваш файл будет выглядеть примерно так.

Используя ваш код, я добавил класс «remove-active» к обеим кнопкам и removeClass к вашему javascript.Вы все делали правильно, вам просто нужно превзойти начальные действия по умолчанию.По умолчанию, когда-то переключалось, необходимо переключиться, чтобы выйти из активного состояния.

   <div class="btn-group btn-group-toggle" data-toggle="buttons">
     <button class="btn btn-outline-primary remove-active" id="1kgbtn" type="button" data-toggle="collapse" data-target="#1kgpack" aria-expanded="false" aria-controls="collapseExample" aria-pressed="false" autocomplete="off">
      1kg package
    </button>

    <button class="btn btn-outline-primary remove-active" id="25kgbtn" type="button" data-toggle="collapse" data-target="#25kgpack" aria-expanded="false" aria-controls="collapseExample" aria-pressed="false" autocomplete="off">
      2.5kg package
    </button>
</div>

 <script src="bootstrap.min.js"></script>

    <script>
$('#1kgbtn').on('click', function () {


        $('#25kgpack').collapse('hide')

        $('.remove-active').removeClass('active');

        if ($('#25kgbtn').button('active') == true) {
            $('#1kgbtn').button('toggle');
        }       
 });

 $('#25kgbtn').on('click', function () {

        $('#1kgpack').collapse('hide');
     $('.remove-active').removeClass('active');

     if ($('#1kgbtn').button('active') == true) {
         $('#25kgbtn').button('toggle');
    }
});
</script>

Используя целевой объект данных, вы можете получить идентификатор и позже с ним делать разные вещи.(эта часть просто классная)

    $('button[data-toggle="collapse"]').click(function(){
    //log the id of the target
    console.log($(this).attr('data-target'));        
});

Надеюсь, это поможет.

- редактировать -

Я немного изменил код, но сделал комментарии, чтобы помочь с объяснением.

            //on button click

        $('button').click(function(e){
            //the current button is toggled

            //check to see if the other button is toggled

            if($('.remove-active').hasClass('active')){ //if it has class this means it is active
                //store the active id
                var e = $('.remove-active.active').attr('id');

                //we clicked on the same button then we would equal the same id
                    if(e == $(this).attr('id')){
                        //collapse the clicked Id if we are unpressing the button
                        $(this).collapse('hide');

                        console.log(e + ' auto toggles with bootstrap and collapse the currently clicked target ' + $(this).attr('data-target'));                       

                       }else{ // else
                           //we untoggle the other button and element
                           $('#' + e).button('toggle');
                           //we also collapse the other element
                           $($('#' + e).attr('data-target')).collapse('hide');

                           console.log("The other element was clicked and we cleared it along with collapsing the " + $('#' + e).attr('data-target'));
                       }                        
               }

            //be sure to close out the console.log() stuff
            //this is just for viewing example
        });

Это переключит текущую кнопку, проверит, переключена ли другая кнопка, и если это так, переключите ее.Также, если кнопка переключается, то при нажатии этой кнопки указанная кнопка затем отключается.