Добрый день, как сделать, чтобы элемент li, который включает заголовок h3 , был шириной одинаковой с ним шириной, для того, чтобы нажать можно было только по тексту, то есть
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {box-sizing: border-box; margin-block-end: 2px; margin-block-start: 2px;}
.active{ display: none; }
ul li{list-style-type: none; cursor: pointer;}
.main{display:flex; flex-direction: column; position: absolute;}
.main li{display: inline-block; position: relative;}
.main li:before {content: ''; position: absolute; top: 4px; left: 0; width: 8px; height: 8px; border-radius: 50%;}
</style>
</head>
<body>
<ul class="main ">
<li><h3>Нажать здесь</h3>
<ul class="active">
<li>Какой-то текст</li>
</ul>
</li>
<li><h3>Нажать здесь, чтобы открыть текст</h3>
<ul class="active">
<li>Какой-то текст</li>
</ul>
</li>
</ul>
<script src="jquery.min.js"></script>
<script>
jQuery('.main h3').click(function() {
$(this).next("ul").toggleClass("active");
});
</script>
</body>
</html>
Простой
