Всем привет,
Я использовал accordion из этого примера https://getbootstrap.com/docs/4.1/components/collapse/#accordion-example
Не подскажите а как сделать чтобы заголовок открытого элементы выделялся (например в strong). Я вижу что aria-expanded - свойство открыт блок или нет но как его увязать со свойствами текста заголовка - непонятно...
jquery3.1/vuejs 2.5
2) И можно ли эти блоки открыть/закрывать програмно ?
EDITED:
В своем vuejs темплейты делаю:
<template>
<div class="card offset-md-1">
<nav class="navbar navbar-expand-lg navbar-light bg-light" v-show="logged_user_id && logged_user_name">
<a class="navbar-brand" href="/">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
:aria-expanded="false" aria-label="Toggle navigation" id="myCollapsible">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
...
<script>
export default {
data() {
return {
logged_user_id: '',
}
},
created() {
},
mounted() {
$('#myCollapsible').on('hide.bs.collapse', function (e) {
alert( "myCollapsible hide.bs.collapse::"+(-99) ) // ЭТОТ АЛЕРТ НЕ ВЫСКАКИВАЕТ - ТО ЕСТЬ СОБЫТИЕ НЕ ВЫЗЫВАЕТСЯ
// во время закрытия
console.log(e.target) // цель по которой кликаем ( тут тебе и стили задать можно)
})
$('#myCollapsible').on('show.bs.collapse', function (e) {
// во время открытия
alert( "myCollapsible show.bs.collapse::"+(-88) ) // ЭТОТ АЛЕРТ НЕ ВЫСКАКИВАЕТ - ТО ЕСТЬ СОБЫТИЕ НЕ ВЫЗЫВАЕТСЯ
console.log(e.target) // цель по которой кликаем ( тут тебе и стили задать можно)
})
alert( "created AFTER!::"+(-6) ) // ЭТОТ АЛЕРТ ВЫСКАКИВАЕТ - ТО ЕСТЬ СОБЫТИЕ MOUNTED ВЫЗЫВАЕТСЯ БЕЗ ОШИБОК В КОНСОЛЕ
...
},
И обработчики событий выше не вызываются при клике на кнопке navbar-а... Если вставить в событие created - также не работает.
id задан как myCollapsible - только для моего navbar-а - иыми словами он единственный
Vue :2.5.16
jQuery :3.3.1
А как правильно ?
Спасибо!