Я сделал макет в HTML / Bootstrap, со складной левой навигационной панелью. Я хотел, чтобы сворачивающаяся кнопка была частью моего навигационного элемента, как кнопка закрытия classi c. Естественно, мне также нужна кнопка, чтобы вернуть навигационную панель. Так что я использовал две мульти сворачивающиеся кнопки. Вот так:
<!doctype html>
<html class="h-100" lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<title>Test side nav</title>
</head>
<body class="h-100 d-flex flex-column">
<header class="border text-center">
<h1>Test side nav</h1>
</header>
<main class="flex-grow-1">
<nav id="nonav" class="float-left h-100 border collapse multi-collapse">
<button type="button" class="float-right" aria-label="Open" data-toggle="collapse" data-target=".multi-collapse" aria-controls="nonav nav">
<span aria-hidden="true">></span>
</button>
</nav>
<nav id="nav" class="float-left h-100 nav flex-column border collapse multi-collapse show" style="width: 200px">
<span class="bg-primary text-white text-center">
Menu
<button type="button" class="float-right" aria-label="Close" data-toggle="collapse" data-target=".multi-collapse" aria-controls="nav nonav">
<span aria-hidden="true">×</span>
</button>
</span>
<a class="nav-link" href="#">Link1</a>
<a class="nav-link" href="#">Link2</a>
<a class="nav-link" href="#">Link3</a>
<a class="nav-link" href="#">Link4</a>
</nav>
<section class="h-100 d-flex flex-column">
<div class="overflow-auto flex-grow-1 text-justify" style="height: 1px; padding: 10px;">
Content goes here...
</div>
</section>
</main>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</body>
</html>
У меня проблема в том, что независимо от того, какой порядок я использую в теге aria-controls, сначала происходит появление, а затем исчезновение, что является довольно странным эффектом. Есть ли способ изменить это?