我只是隐藏了包含section 3 id的#sec3。每当我要进行搜索时我试图这样做，如果可搜索的内容在第3部分中，它将被显示或可见。请任何人建议我或帮助我使这些内容可见。我只发布了#sec2和#sec3 css而不是hold css因为它超过了写入限制。所以请帮助我。提前致谢....
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-brand" onclick="w3_open()"><i class="fas fa-bars"></i></div>
<div class="nav navbar-nav navbar-right">
<input type="text" class="live-search-box" placeholder="Search...">
</div>
<div class="w3-overlay w3-animate-opacity" onclick="w3_close()" style="cursor:pointer; display:none" id="myOverlay"></div>
<center>
<div>
<img src="logo/mask.png">
<h1>My Website</h1>
</div>
</center>
</div>
</nav>
<div class="w3-sidebar w3-bar-block w3-border-right w3-animate-left" style="display:none;" id="mySidebar">
<button onclick="w3_close()" class="w3-bar-item w3-large">Close ×</button>
<a href="#" class="w3-bar-item w3-button">Link 1</a>
<a href="#" class="w3-bar-item w3-button">Link 2</a>
<a href="#" class="w3-bar-item w3-button">Link 3</a>
<a href="#" class="w3-bar-item w3-button">Link 4</a>
<a href="#" class="w3-bar-item w3-button">Link 5</a>
<a href="#" class="w3-bar-item w3-button">Link 6</a>
</div>
<div class="w3-overlay w3-animate-opacity" onclick="w3_close()" style="cursor:pointer; display:none" id="myOverlay"></div>
<!-- Page Content -->
<section id="sec2">
<div class="container-fluid">
<div class="container">
<div class="row">
<div class="col-xs-6 col-sm-3 col-md-3">
<div class="card thumbnail animated slideInRight">
<img class="myImg" src="https://pbs.twimg.com/profile_images/831993825635745796/HnVmB0-k_400x400.jpg" alt="John Doe" style="width:100%">
<h4>John Doe</h4>
</div>
</div>
<div class="col-xs-6 col-sm-3 col-md-3">
<div class="card thumbnail animated slideInRight">
<img class="myImg" src="https://pbs.twimg.com/profile_images/831993825635745796/HnVmB0-k_400x400.jpg" alt="Steve John" style="width:100%">
<h4>Steve John</h4>
</div>
</div>
<div class="col-xs-6 col-sm-3 col-md-3">
<div class="card thumbnail animated slideInRight">
<img class="myImg" src="https://pbs.twimg.com/profile_images/831993825635745796/HnVmB0-k_400x400.jpg" alt="John Cenna" style="width:100%">
<h4>John Cenna</h4>
</div>
</div>
<div class="col-xs-6 col-sm-3 col-md-3">
<div class="card thumbnail animated slideInRight">
<img class="myImg" src="https://pbs.twimg.com/profile_images/831993825635745796/HnVmB0-k_400x400.jpg" alt="Mark William" style="width:100%">
<h4>Mark William</h4>
</div>
</div>
<div class="col-xs-6 col-sm-3 col-md-3">
<div class="card thumbnail animated slideInRight">
<img class="myImg" src="https://pbs.twimg.com/profile_images/831993825635745796/HnVmB0-k_400x400.jpg" alt="William Wordssmith" style="width:100%">
<h4>William Wordssmith</h4>
</div>
</div>
<div class="col-xs-6 col-sm-3 col-md-3">
<div class="card thumbnail animated slideInRight">
<img class="myImg" src="https://pbs.twimg.com/profile_images/831993825635745796/HnVmB0-k_400x400.jpg" alt="Jason Wathson" style="width:100%">
<h4>Jason Wathson</h4>
</div>
</div>
<div class="col-xs-6 col-sm-3 col-md-3">
<div class="card thumbnail animated slideInRight">
<img class="myImg" src="https://pbs.twimg.com/profile_images/831993825635745796/HnVmB0-k_400x400.jpg" alt="Jimmy Coogan" style="width:100%">
<h4>Jimmy Coogan</h4>
</div>
</div>
<div class="col-xs-6 col-sm-3 col-md-3">
<div class="card thumbnail animated slideInRight">
<img class="myImg" src="https://pbs.twimg.com/profile_images/831993825635745796/HnVmB0-k_400x400.jpg" alt="Mark Zuckerberg" style="width:100%">
<h4>Mark Zuckerberg</h4>
</div>
</div>
</div>
</div>
</div>
</section>
<section id="sec3">
<div class="container-fluid">
<div class="container">
<div class="row">
<div class="col-xs-6 col-sm-3 col-md-3">
<div class="card thumbnail">
<img class="myImg" src="https://pbs.twimg.com/profile_images/831993825635745796/HnVmB0-k_400x400.jpg" alt="Hrithik Roshan" style="width:100%">
<h4>Hrithik Roshan</h4>
</div>
</div>
<div class="col-xs-6 col-sm-3 col-md-3">
<div class="card thumbnail">
<img class="myImg" src="https://pbs.twimg.com/profile_images/831993825635745796/HnVmB0-k_400x400.jpg" alt="Salman Khan" style="width:100%">
<h4>Salman Khan</h4>
</div>
</div>
<div class="col-xs-6 col-sm-3 col-md-3">
<div class="card thumbnail">
<img class="myImg" src="https://pbs.twimg.com/profile_images/831993825635745796/HnVmB0-k_400x400.jpg" alt="Shahid Kapoor" style="width:100%">
<h4>Shahid Kapoor</h4>
</div>
</div>
<div class="col-xs-6 col-sm-3 col-md-3">
<div class="card thumbnail">
<img class="myImg" src="https://pbs.twimg.com/profile_images/831993825635745796/HnVmB0-k_400x400.jpg" alt="Dibendu Mondal" style="width:100%">
<h4>Dibendu Mondal</h4>
</div>
</div>
<div class="col-xs-6 col-sm-3 col-md-3">
<div class="card thumbnail">
<img class="myImg" src="https://pbs.twimg.com/profile_images/831993825635745796/HnVmB0-k_400x400.jpg" alt="Sudip Barik" style="width:100%">
<h4>Sudip Barik</h4>
</div>
</div>
<div class="col-xs-6 col-sm-3 col-md-3">
<div class="card thumbnail">
<img class="myImg" src="https://pbs.twimg.com/profile_images/831993825635745796/HnVmB0-k_400x400.jpg" alt="Masum Abdulla" style="width:100%">
<h4>Masum Abdulla</h4>
</div>
</div>
<div class="col-xs-6 col-sm-3 col-md-3">
<div class="card thumbnail">
<img class="myImg" src="https://pbs.twimg.com/profile_images/831993825635745796/HnVmB0-k_400x400.jpg" alt="Debabrata Maji" style="width:100%">
<h4>Debabrata Maji</h4>
</div>
</div>
</div>
</div>
</div>
</section>
#sec2{
position: relative;
width: 100%;
top: 80px;
display: block;
}
#sec3{
position: relative;
width: 100%;
top: 80px;
display: none;
}
jQuery(document).ready(function($) {
$('.live-search-box').on('keyup', function() {
var searchTerm = $(this).val().toLowerCase();
$('.myImg').each(function(idx, item) {
var alt = $(item).attr("alt").toLowerCase();
if (alt.indexOf(searchTerm) >= 0 ||searchTerm.length < 1) {
$(item).parent().parent().show();
} else {
$(item).parent().parent().hide();
}
});
});
});
在你的js上尝试这个：
jQuery(document).ready(function($) {
$('.live-search-box').on('keyup', function() {
var searchTerm = $(this).val().toLowerCase();
$('.myImg').each(function(idx, item) {
var alt = $(item).attr("alt").toLowerCase();
if (alt.indexOf(searchTerm) >= 0 ||searchTerm.length < 1) {
$(item).parentsUntil('#sec3').parent().find('#sec3').hide();
$(item).parent().parent().show();
} else {
$(item).parentsUntil('#sec3').parent().find('#sec3').show();
$(item).parent().parent().hide();
}
});
});
});