英文:
Vertically expanding search box html css
问题
我正在尝试为导航栏创建一个可扩展的搜索框。当用户点击搜索框时，它应该展开，同时显示另一个具有不同名称输入的输入框。
我想要有两个这样的搜索框，一个在另一个下面。
这是我当前的实现：
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-expand-lg py-2 fixed-top">
<div class="container-fluid">
<a class="navbar-brand" href="">
<h7 id="nick"><strong class="d-none d-lg-inline">myLogo</strong></h7>
</a>
<form class="my-auto w-75" method="get" action="">
<div class="input-group">
<input type="text" class="form-control border border-right-0 ui-autocomplete-input" id="search"
name="search" placeholder="Cerca..." autocomplete="off">
<span class="input-group-append">
<button class="btn btn-outline-light border border-left-0 p-3"
style="border-bottom-left-radius: 0%; border-top-left-radius: 0%; background-color: #f18918;"
type="submit">
Cerca
</button>
</span>
</div>
</form>
<a class="navbar-icon" data-bs-toggle="offcanvas" href="#sidebar" role="button" aria-controls="sidebar">
<i class="bi bi-person-circle"></i>
</a>
</div>
</nav>
有任何想法吗？
英文:
I am trying to make an expandible search box for a navbar. When the user clicks on the searchbox this should expand showing also another input box with a different name input.
I would like to have such two searchbox one under the other.
This is my current implementation:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
<!-- language: lang-html -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-expand-lg py-2 fixed-top">
<div class="container-fluid">
<a class="navbar-brand" href="">
<h7 id="nick"><strong class="d-none d-lg-inline">myLogo</strong></h7></a>
<form class="my-auto w-75" method="get" action="">
<div class="input-group">
<input type="text" class="form-control border border-right-0 ui-autocomplete-input" id="search"
name="search" placeholder="Cerca..." autocomplete="off">
<span class="input-group-append">
<button class="btn btn-outline-light border border-left-0 p-3" style="border-bottom-left-radius: 0%; border-top-left-radius: 0%; background-color: #f18918;" type="submit">
Cerca
</button>
</span>
</div>
</form>
<a class="navbar-icon" data-bs-toggle="offcanvas" href="#sidebar" role="button" aria-controls="sidebar"><i class="bi bi-person-circle"></i></a>
</div>
</nav>
<!-- end snippet -->
Any idea?
答案1
得分: 1
我创建了另一个搜索字段，复制了第一个，并在第一个搜索字段上添加了JavaScript的点击事件，以显示第二个输入字段。这些代码非常基础且自解释。如果需要，我认为您可以自行进行其他调整。如果您仍有任何问题，请随时提问。
英文:
I created another search field copying the first one and added a click event on the first search field with JavaScript to display the 2nd input field. The codes are very basic and self explanatory. I think you can do the other adjustment by yourself if necessary. If you still have any question feel free to ask.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
window.addEventListener('click', function() {
document.querySelector('#search').style.height = "100%";
document.querySelector('#search2').style.display = "none";
})
document.querySelector('#search').addEventListener('click', function(event) {
event.stopPropagation();
this.style.height = "50%"; // Decreasing the height of the input for showing 2 one below another
document.querySelector('#search2').style.display = "block"; // Showing the 2nd input field on click
})
document.querySelector('#search2').addEventListener('click', function(event) {
event.stopPropagation();
})
document.querySelector('.input-group-append').addEventListener('click', function(event) {
event.stopPropagation();
})
<!-- language: lang-html -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-expand-lg py-2 fixed-top">
<div class="container-fluid">
<a class="navbar-brand" href="">
<h7 id="nick"><strong class="d-none d-lg-inline">myLogo</strong></h7>
</a>
<form class="my-auto w-75" method="get" action="">
<div class="input-group">
<div style="flex: 1;">
<input type="text" class="form-control border border-right-0 ui-autocomplete-input" id="search" name="search" placeholder="Cerca..." autocomplete="off" style="height: 100%;">
<input type="text" class="form-control border border-right-0 ui-autocomplete-input" id="search2" name="search2" placeholder="Cerca2..." autocomplete="off" style="height: 50%; display: none;">
</div>
<span class="input-group-append">
<button class="btn btn-outline-light border border-left-0 p-3" style="border-bottom-left-radius: 0%; border-top-left-radius: 0%; background-color: #f18918; height: 100%;" type="submit">
Cerca
</button>
</span>
</div>
</form>
<a class="navbar-icon" data-bs-toggle="offcanvas" href="#sidebar" role="button" aria-controls="sidebar"><i class="bi bi-person-circle"></i></a>
</div>
</nav>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论