0

Есть страничка с двумя элементами. Сейчас это работает так: при нажатии на слово About или Projects выводится текст. Вопрос: как сделать так, чтобы после нажатия на About при нажатии на Projects скрывался обратно текст About и открывался Projects.Другими словами,нужно, чтобы при открытии одного блока другие сворачивались.Попробовал эти два блока засунуть в один контейнер и к каждому блоку добавил атрибут data-parent, но, это почему-то не работает.

 <div class="col-md-3">
     <div class="daughter">
         <div class="container" data-toggle="collapse" href="#About" aria-expanded="true" aria-controls="About" data-target="#About">
            About
         </div>
         <div class="collapse" id="About">
            <div class="well">
               ...
            </div>
        </div>
    </div>

</div>
<div class="col-md-3">
    <div class="daughter">
        <div class="container">

            <div class="container" data-toggle="collapse" href="#Projects" aria-expanded="false" aria-controls="About" data-target="#Projects">
                Projects
            </div>
            <div class="collapse" id="Projects">
                <div class="well">
                    ...
                </div>
            </div>

        </div>
    </div>
</div>
2
  • Простыми средствами bootstrap закрыть "чужой" объект не получится. Нужен будет JS
    – cyadvert
    10 ноя 2015 в 20:55
  • @cyadvert Не подскажите как?
    – D.Ult
    10 ноя 2015 в 21:01

1 ответ 1

1

Код не универсальный. Конкретно под Вашу задачу.

$('[data-target=#Projects]').bind('click', function() {  // событие будет запускаться при нажатии на кнопку с [data-target=#Projects]
    if ($('#About').attr('aria-expanded')=='true') { // проверяем, открыт ли #About
        $('[data-target=#About]').trigger('click'); // если открыт - "наджимаем" на его кнопку, что его закроет
    }
});
$('[data-target=#About]').bind('click', function() {
    if ($('#Projects').attr('aria-expanded')=='true') {
        $('[data-target=#Projects]').trigger('click');
    }
});

Оба элемента практически эдентичны. Меняются только ID элементов с которыми работаем.
Итак, обоим элементам [data-target=#About] и [data-target=#Projects] присваевается функция, которая будет запущена при клике на элемент.
Функция проверяет, открыт ли второй элемент: ($('#Projects').attr('aria-expanded')=='true'), и если открыт "запускает" нажатие на кнопку второго элемента, что его закроет.

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.