У меня проблемы с веб-формами Bootstrap Accordion ASP. net. Я не могу держать его открытым после обратной передачи.
Мне нужно открыть страницу с закрытым аккордеоном. Затем, когда нажата кнопка cmdActivityTS, я хочу открыть Аккордеон. Когда контент внутри Accordian публикуется обратно (здесь Button1), я хочу, чтобы Accordian оставался открытым, чтобы я мог показать некоторые данные внутри. Я хочу, чтобы Accordian снова закрывался при нажатии на cmdActivityTS.
Я почти могу сделать это путем декларативного добавления .show к div collapseOne. Но Аккордеон открывается, когда открывается страница. Однако после этого он остается открытым после постбэков. Итак, я пытался достичь того же результата, добавляя и удаляя классы в сценарии. Не повезло.
Вот мой код. Спасибо за вашу помощь. Я работал над этим некоторое время.
'' '
head runat="server">
<title>Test page</title>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<link rel="stylesheet" href="/Vendor/Admin.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#cmdActivityTS').click(function () {
var state = $('#hiddenfield').val();
if (state == 'collapse'){
$('#hiddenfield').val('show')
$('#collapseOne').addClass('show')
}
else {
$('#hiddenfield').val('collapse')
$('.collapseOne').removeClass('show')
}
var state = $("#hiddenfield").val();
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:HiddenField ID="hiddenfield" runat="server" />
<div class="accordion" >
<div class="card mb-3">
<div class="card-header" id="headingOne" style="background-color:white;"">
<div class="mb-0">
<button type="button" id="cmdActivityTS" runat="server" class="btn btn-link collapsed " data-toggle="collapse" data-target="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
<h5 style="color:steelblue">Show Data From Server</h5>
</button>
</div>
</div>
<div id="collapseOne" class="collapse" aria-labelledby="headingOne" data-parent="#accordion" enableviewstate="true">
<div class="card-body">
<div>
Aliquam dictum viverra dui ac euismod.
<div>
<asp:Button ID="Button1" runat="server" Text="Button" onclick="Button1_Click"/>
</div>
</div>
</div>
</div> <!-- collapseOne -->
</div> <!-- Card -->
</div> <!-- Accordian -->
' ''