Как свернуть другие меню при нажатии на переключатели в бутстрапе

У меня есть загрузчик radio buttons, каждый из которых имеет свой собственный сворачиваемый контент, я могу щелкнуть по ним, и они расширятся, но каждый раз, когда я расширяю один, другой должен рушиться, чего не происходит ... сделайте это там, где я нажимаю другой переключатель другие меню сворачиваются - см. пример -

<link rel = "stylesheet" href = "https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity = "sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin = "anonymous">


<!-- VLC Source -->
            <div class = "form-group row m-1">
                <div class = "form-check col-lg-6" id = "myGroup">
                    <input class = "form-check-input collapsed" type = "radio" name = "inlineRadioOptions" id = "vlcRadio" data-toggle = "collapse" data-target = "#vlc" aria-expanded = "false" aria-controls = "vlc" >
                    <label class = "form-check-label" >VLC Source</label>
                </div>
            </div>
            <!-- VLC Source Form -->
            <div id = "vlc" class = "collapse" data-parent = "#myGroup">
                <div  class = "form-group row m-1 ">
                    <label  class = "col-lg-4 col-form-label">Width</label>
                   <input type = "text" class = "form-control col-lg-8" required value = "1920" /> 
                </div>
                <div  class = "form-group row m-1 ">
                    <label  class = "col-lg-4 col-form-label">Height</label>
                   <input type = "text" class = "form-control col-lg-8" required value = "1080" /> 
                </div>
               <div  class = "form-group row m-1 ">
                    <label  class = "col-lg-4 col-form-label">Type</label>
                   <input type = "text" class = "form-control col-lg-8" required value = "VLC Source" /> 
                </div> 
                <div  class = "form-group row m-1 ">
                   <label class = "col-lg-4 col-form-label">URL</label>
                    <input type = "file" class = "filestyle" data-input = "false" data-buttonname = "btn-secondary">
                </div> 
                 <div  class = "form-group row m-1 ">
                   <label  class = "col-lg-4 col-form-label">Volume</label>
                 <form class = "range-field col-lg-8">
                   <input type = "range" class = "custom-range" min = "0" max = "100" step = "1" id = "customRange3">
                 </form>
                </div> 
            </div>
            
            <!-- VNC Source -->
                <div class = "form-group row m-1">
                <div class = "form-check ">
                    <input class = "form-check-input collapsed" type = "radio" name = "inlineRadioOptions" id = "inlineRadio1" value = "option1" data-toggle = "collapse" data-target = "#vnc" aria-expanded = "false" aria-controls = "vnc" >
                    <label class = "form-check-label" >VNC Viewer</label>
                </div>
            </div>
            <!-- VNC Source Form -->
            <div id = "vnc" class = "collapse" >
                <div  class = "form-group row m-1 ">
                    <label  class = "col-lg-4 col-form-label">Type</label>
                   <input type = "text" class = "form-control col-lg-8" required value = "1920" /> 
                </div>
                <div  class = "form-group row m-1 ">
                    <label  class = "col-lg-4 col-form-label">VNC Server</label>
                   <input type = "text" class = "form-control col-lg-8" required value = "1080" /> 
                </div>
            </div>
                      <script src = "https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity = "sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin = "anonymous"></script>
<script src = "https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity = "sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin = "anonymous"></script>
<script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity = "sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin = "anonymous"></script>

html jquery bootstrap-4

22.12.2020 06:12

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

431

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Вы можете получить желаемый эффект с помощью пользовательской функции jQuery.collapse().

Пример Codepen: https://codepen.io/cursorrux/pen/mdrMgKZ

Фрагмент кода:

$('.form-check-input').click(function() {
    $('.collapse').collapse('hide');
    $('#' + $(this).attr('aria-controls')).collapse('show');
});

<link rel = "stylesheet" href = "https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity = "sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin = "anonymous">

<!-- VLC Source -->
    <div class = "form-group row m-1">
        <div class = "form-check col-lg-6" id = "myGroup">
            <input class = "form-check-input collapsed" type = "radio" name = "inlineRadioOptions" id = "vlcRadio" data-toggle = "collapse" data-target = "#vlc" aria-expanded = "false" aria-controls = "vlc" >
            <label class = "form-check-label" >VLC Source</label>
        </div>
    </div>
    <!-- VLC Source Form -->
    <div id = "vlc" class = "collapse" data-parent = "#myGroup">
        <div  class = "form-group row m-1 ">
            <label  class = "col-lg-4 col-form-label">Width</label>
           <input type = "text" class = "form-control col-lg-8" required value = "1920" /> 
        </div>
        <div  class = "form-group row m-1 ">
            <label  class = "col-lg-4 col-form-label">Height</label>
           <input type = "text" class = "form-control col-lg-8" required value = "1080" /> 
        </div>
       <div  class = "form-group row m-1 ">
            <label  class = "col-lg-4 col-form-label">Type</label>
           <input type = "text" class = "form-control col-lg-8" required value = "VLC Source" /> 
        </div> 
        <div  class = "form-group row m-1 ">
           <label class = "col-lg-4 col-form-label">URL</label>
            <input type = "file" class = "filestyle" data-input = "false" data-buttonname = "btn-secondary">
        </div> 
         <div  class = "form-group row m-1 ">
           <label  class = "col-lg-4 col-form-label">Volume</label>
         <form class = "range-field col-lg-8">
           <input type = "range" class = "custom-range" min = "0" max = "100" step = "1" id = "customRange3">
         </form>
        </div> 
    </div>
            
    <!-- VNC Source -->
    <div class = "form-group row m-1">
        <div class = "form-check ">
            <input class = "form-check-input collapsed" type = "radio" name = "inlineRadioOptions" id = "inlineRadio1" value = "option1" data-toggle = "collapse" data-target = "#vnc" aria-expanded = "false" aria-controls = "vnc" >
            <label class = "form-check-label" >VNC Viewer</label>
        </div>
    </div>
    <!-- VNC Source Form -->
    <div id = "vnc" class = "collapse" >
        <div  class = "form-group row m-1 ">
            <label  class = "col-lg-4 col-form-label">Type</label>
           <input type = "text" class = "form-control col-lg-8" required value = "1920" /> 
        </div>
        <div  class = "form-group row m-1 ">
            <label  class = "col-lg-4 col-form-label">VNC Server</label>
           <input type = "text" class = "form-control col-lg-8" required value = "1080" /> 
        </div>
    </div>

<script src = "https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity = "sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin = "anonymous"></script>
<script src = "https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity = "sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin = "anonymous"></script>
<script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity = "sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin = "anonymous"></script>

Резюме кода: всякий раз, когда происходит событие click, получайте текущее значение атрибута aria-controls и скрывайте все остальные, кроме того, по которому щелкнули.

Рад, что это решило вашу проблему @CodingNoob! Отметьте это как принятый ответ, если вы этого хотели.

— 22.12.2020 11:12

22.12.2020 06:48