為了隱藏無意義的列,我在我的畫廊過濾器上使用了一個 javascript 切換文本內容,它完美無缺。但是,每次重繪 頁面時,這些列都會放大,我需要單擊全部顯示然后隱藏全部才能使其正常作業。我做行的原因是,如果我在列的中心插入 showmore identityentification,當我按下全部顯示時,它們會在每一行顯示一列,但在這種技術上,所有列都會正常顯示。我嘗試將 javascript 中的顯示成本轉換為許多不同的值,但是它的英里數現在不再正常運行。你有什么方法可以解決這個問題嗎?
function togglesec1() {
var showMoreText = document.getElementById("showmore");
var buttonText = document.querySelector("#moreBtn p");
var moreIcon = document.querySelector("#moreBtn img");
if (startsec.style.display === "none") {
showMoreText.style.display = "none";
startsec.style.display = "inline";
buttonText.innerHTML = "Show More";
buttonText.classList.remove('lesser');
moreIcon.classList.remove('lesser');
} else {
showMoreText.style.display = "inline";
startsec.style.display = "none";
buttonText.innerHTML = "Show Less";
buttonText.classList.add('lesser');
moreIcon.classList.add('lesser');
}
}
<head>
<link rel="shortcut icon" href="./images/favicon.ico" type="image/vnd.microsoft.icon" />
<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>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</head>
<body>
<section id="work">
<div class="container-fluid clientbox text-center py-5">
<div class="row">
<div class="col-12 col-md-12 col-lg-12 text-center">
<ul>
<li class="list-inline-item active" data-filter="all">A</li>
<li class="list-inline-item" data-filter="B">B</li>
<li class="list-inline-item" data-filter="C">C</li>
<li class="list-inline-item" data-filter="D">D</li>
<li class="list-inline-item" data-filter="M">M</li>
<li class="list-inline-item" data-filter="UI">U</li>
<li class="list-inline-item" data-filter="CO">CC</li>
</ul>
</div>
</div>
<div class="row g-0">
<div class="clients C col-6 col-md-4 col-lg-3">
<a href="#">
<figure class="client-container">
<img class="img-fluid brand-img" src="https://toppng.com/uploads/preview/book-11549420966kupbnxvyyl.png" alt="Logo">
<figcaption class="product-desc"><P>C</P></figcaption>
<figcaption class="product-desc2"><p>H</p></figcaption>
</figure>
</a>
</div>
<div class="clients B D C CC col-6 col-md-4 col-lg-3">
<a href="#">
<figure class="client-container">
<img class="img-fluid brand-img" src="https://w7.pngwing.com/pngs/36/268/png-transparent-ballpoint-pen-stylus-fountain-pen-waterman-pens-pen-pen-advertising-rollerball-pen.png" alt="Logo">
<figcaption class="product-desc"><P>b</P></figcaption>
<figcaption class="product-desc2"><p>k</p></figcaption>
</figure>
</a>
</div>
<div class="clients B C D M U CC col-6 col-md-4 col-lg-3">
<a href="#">
<figure class="client-container">
<img class="img-fluid brand-img" src="https://toppng.com/uploads/preview/black-electric-guitar-11530936970df8gvueqvz.png" alt="Logo">
<figcaption class="product-desc"><P>n</P></figcaption>
<figcaption class="product-desc2"><p>P</p></figcaption>
</figure>
</a>
</div>
<div class="clients B C D CC col-6 col-md-4 col-lg-3">
<a href="#">
<figure class="client-container">
<img class="img-fluid brand-img" src="https://toppng.com/uploads/preview/book-11549420966kupbnxvyyl.png" alt="Logo">
<figcaption class="product-desc"><P>B</P></figcaption>
<figcaption class="product-desc2"><p>G</p></figcaption>
</figure>
</a>
</div>
</div>
<div id="startsec"></div>
<div id="showmore">
<div class="row g-0">
<div class="clients B CC col-6 col-md-4 col-lg-3">
<a href="#">
<figure class="client-container">
<img class="img-fluid brand-img" src="https://toppng.com/uploads/preview/black-electric-guitar-11530936970df8gvueqvz.png" alt="Logo">
<figcaption class="product-desc"><P>N</P></figcaption>
<figcaption class="product-desc2"><p>g</p></figcaption>
</figure>
</a>
</div>
<div class="clients D B C M col-6 col-md-4 col-lg-3">
<a href="#">
<figure class="client-container">
<img class="img-fluid brand-img" src="https://w7.pngwing.com/pngs/454/512/png-transparent-red-and-white-guitar-red-white-guitar-red-guitar-folk-guitar-thumbnail.png" alt="Logo">
<figcaption class="product-desc"><P>N</P></figcaption>
<figcaption class="product-desc2"><p>s</p></figcaption>
</figure>
</a>
</div>
<div class="clients B UI col-6 col-md-4 col-lg-3">
<a href="#">
<figure class="client-container">
<img class="img-fluid brand-img" src="https://esquilo.io/png/thumb/OQQMxyuwyKmDwp0-Musical-Vector-Acoustic-Guitar-PNG.png" alt="Logo">
<figcaption class="product-desc"><P>BS</P></figcaption>
<figcaption class="product-desc2"><p>l</p></figcaption>
</figure>
</a>
</div>
<div class="clients CC col-6 col-md-4 col-lg-3">
<a href="#">
<figure class="client-container">
<img class="img-fluid brand-img" src="https://toppng.com/uploads/preview/book-11549420966kupbnxvyyl.png" alt="Logo">
<figcaption class="product-desc"><P>CN</P></figcaption>
<figcaption class="product-desc2"><p>C</p></figcaption>
</figure>
</a>
</div>
<div class="clients D col-6 col-md-4 col-lg-3">
<a href="#">
<figure class="client-container">
<img class="img-fluid brand-img" src="https://toppng.com/uploads/preview/black-electric-guitar-11530936970df8gvueqvz.png" alt="Logo">
<figcaption class="product-desc"><P>d</P></figcaption>
<figcaption class="product-desc2"><p>T</p></figcaption>
</figure>
</a>
</div>
<div class="clients B D col-6 col-md-4 col-lg-3">
<a href="#">
<figure class="client-container">
<img class="img-fluid brand-img" src="https://w7.pngwing.com/pngs/454/512/png-transparent-red-and-white-guitar-red-white-guitar-red-guitar-folk-guitar-thumbnail.png" alt="Logo">
<figcaption class="product-desc"><P>Bl</P></figcaption>
<figcaption class="product-desc2"><p>E</p></figcaption>
</figure>
</a>
</div>
<div class="clients B D CC col-6 col-md-4 col-lg-3">
<a href="#">
<figure class="client-container">
<img class="img-fluid brand-img" src="https://toppng.com/uploads/preview/book-11549420966kupbnxvyyl.png" alt="Logo">
<figcaption class="product-desc"><P>BN</P></figcaption>
<figcaption class="product-desc2"><p>S</p></figcaption>
</figure>
</a>
</div>
<div class="clients B C D M col-6 col-md-4 col-lg-3">
<a href="#">
<figure class="client-container">
<img class="img-fluid brand-img" src="https://w7.pngwing.com/pngs/454/512/png-transparent-red-and-white-guitar-red-white-guitar-red-guitar-folk-guitar-thumbnail.png" alt="Logo">
<figcaption class="product-desc"><P>B</P></figcaption>
<figcaption class="product-desc2"><p>I</p></figcaption>
</figure>
</a>
</div>
<div class="clients B M C D CC col-6 col-md-4 col-lg-3">
<a href="#">
<figure class="client-container">
<img class="img-fluid brand-img" src="https://w7.pngwing.com/pngs/454/512/png-transparent-red-and-white-guitar-red-white-guitar-red-guitar-folk-guitar-thumbnail.png" alt="Logo">
<figcaption class="product-desc"><P>N</P></figcaption>
<div class="product-desc2"><p>o</p></div>
</figure>
</a>
</div>
<div class="clients C B col-6 col-md-4 col-lg-3">
<a href="#">
<figure class="client-container">
<img class="img-fluid brand-img" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSHo3btqZiiOgTrKCGihDfnm9V5va87up2aeg&usqp=CAU" alt="Logo">
<figcaption class="product-desc"><P>CAG</P></figcaption>
<figcaption class="product-desc2"><p>Jr</p></figcaption>
</figure>
</a>
</div>
<div class="clients B col-6 col-md-4 col-lg-3">
<a href="#">
<figure class="client-container">
<img class="img-fluid brand-img" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSHo3btqZiiOgTrKCGihDfnm9V5va87up2aeg&usqp=CAU" alt="Logo">
<figcaption class="product-desc"><P>Brl</P></figcaption>
<figcaption class="product-desc2"><p>Sl</p></figcaption>
</figure>
</a>
</div>
<div class="clients B CC col-6 col-md-4 col-lg-3">
<a href="#">
<figure class="client-container">
<img class="img-fluid brand-img" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSHo3btqZiiOgTrKCGihDfnm9V5va87up2aeg&usqp=CAU" alt="Logo">
<figcaption class="product-desc"><P>Bn</P></figcaption>
<figcaption class="product-desc2"><p>SP</p></figcaption>
</figure>
</a>
</div>
<div class="clients B col-6 col-md-4 col-lg-3">
<a href="#">
<figure class="client-container">
<img class="img-fluid brand-img" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSHo3btqZiiOgTrKCGihDfnm9V5va87up2aeg&usqp=CAU" alt="Logo">
<figcaption class="product-desc"><P>B</P></figcaption>
<figcaption class="product-desc2"><p>Wc</p></figcaption>
</figure>
</a>
</div>
</div>
</div>
<button onclick="togglesec1()" id="moreBtn">
<p class="pink">Show More</p>
<img class="showmore" src="./images/load-more.png" alt="">
</button>
</div>
</section>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg OMhuP IlRH9sENBO0LRn5q 8nbTov4 1p" crossorigin="anonymous"></script>
<script>$(document).ready(function (){$('.list-inline-item').click(function(){const value = $(this).attr('data-filter');if(value == 'all'){$('.clients').show('1000');}else{ $('.clients').not('.' value).hide('1000');$('.clients').filter('.' value).show('1000');}$(this).addClass('active').siblings().removeClass('active')})})</script>
</body>
uj5u.com熱心網友回復:
我仍然不完全確定我理解你的問題。但是,如果您只是想showmore隱藏該部分,您可以簡單display: none地向該元素添加樣式,您的切換就可以正常作業。
function togglesec1() {
var showMoreText = document.getElementById("showmore");
var buttonText = document.querySelector("#moreBtn p");
var moreIcon = document.querySelector("#moreBtn img");
if (startsec.style.display === "none") {
showMoreText.style.display = "none";
startsec.style.display = "inline";
buttonText.innerHTML = "Show More";
buttonText.classList.remove('lesser');
moreIcon.classList.remove('lesser');
} else {
showMoreText.style.display = "inline";
startsec.style.display = "none";
buttonText.innerHTML = "Show Less";
buttonText.classList.add('lesser');
moreIcon.classList.add('lesser');
}
}
#showmore{
display: none;
}
<head>
<link rel="shortcut icon" href="./images/favicon.ico" type="image/vnd.microsoft.icon" />
<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>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</head>
<body>
<section id="work">
<div class="container-fluid clientbox text-center py-5">
<div class="row">
<div class="col-12 col-md-12 col-lg-12 text-center">
<ul>
<li class="list-inline-item active" data-filter="all">A</li>
<li class="list-inline-item" data-filter="B">B</li>
<li class="list-inline-item" data-filter="C">C</li>
<li class="list-inline-item" data-filter="D">D</li>
<li class="list-inline-item" data-filter="M">M</li>
<li class="list-inline-item" data-filter="UI">U</li>
<li class="list-inline-item" data-filter="CO">CC</li>
</ul>
</div>
</div>
<div class="row g-0">
<div class="clients C col-6 col-md-4 col-lg-3">
<a href="#">
<figure class="client-container">
<img class="img-fluid brand-img" src="https://toppng.com/uploads/preview/book-11549420966kupbnxvyyl.png" alt="Logo">
<figcaption class="product-desc">
<P>C</P>
</figcaption>
<figcaption class="product-desc2">
<p>H</p>
</figcaption>
</figure>
</a>
</div>
<div class="clients B D C CC col-6 col-md-4 col-lg-3">
<a href="#">
<figure class="client-container">
<img class="img-fluid brand-img" src="https://w7.pngwing.com/pngs/36/268/png-transparent-ballpoint-pen-stylus-fountain-pen-waterman-pens-pen-pen-advertising-rollerball-pen.png" alt="Logo">
<figcaption class="product-desc">
<P>b</P>
</figcaption>
<figcaption class="product-desc2">
<p>k</p>
</figcaption>
</figure>
</a>
</div>
<div class="clients B C D M U CC col-6 col-md-4 col-lg-3">
<a href="#">
<figure class="client-container">
<img class="img-fluid brand-img" src="https://toppng.com/uploads/preview/black-electric-guitar-11530936970df8gvueqvz.png" alt="Logo">
<figcaption class="product-desc">
<P>n</P>
</figcaption>
<figcaption class="product-desc2">
<p>P</p>
</figcaption>
</figure>
</a>
</div>
<div class="clients B C D CC col-6 col-md-4 col-lg-3">
<a href="#">
<figure class="client-container">
<img class="img-fluid brand-img" src="https://toppng.com/uploads/preview/book-11549420966kupbnxvyyl.png" alt="Logo">
<figcaption class="product-desc">
<P>B</P>
</figcaption>
<figcaption class="product-desc2">
<p>G</p>
</figcaption>
</figure>
</a>
</div>
</div>
<div id="startsec"></div>
<div id="showmore">
<div class="row g-0">
<div class="clients B CC col-6 col-md-4 col-lg-3">
<a href="#">
<figure class="client-container">
<img class="img-fluid brand-img" src="https://toppng.com/uploads/preview/black-electric-guitar-11530936970df8gvueqvz.png" alt="Logo">
<figcaption class="product-desc">
<P>N</P>
</figcaption>
<figcaption class="product-desc2">
<p>g</p>
</figcaption>
</figure>
</a>
</div>
<div class="clients D B C M col-6 col-md-4 col-lg-3">
<a href="#">
<figure class="client-container">
<img class="img-fluid brand-img" src="https://w7.pngwing.com/pngs/454/512/png-transparent-red-and-white-guitar-red-white-guitar-red-guitar-folk-guitar-thumbnail.png" alt="Logo">
<figcaption class="product-desc">
<P>N</P>
</figcaption>
<figcaption class="product-desc2">
<p>s</p>
</figcaption>
</figure>
</a>
</div>
<div class="clients B UI col-6 col-md-4 col-lg-3">
<a href="#">
<figure class="client-container">
<img class="img-fluid brand-img" src="https://esquilo.io/png/thumb/OQQMxyuwyKmDwp0-Musical-Vector-Acoustic-Guitar-PNG.png" alt="Logo">
<figcaption class="product-desc">
<P>BS</P>
</figcaption>
<figcaption class="product-desc2">
<p>l</p>
</figcaption>
</figure>
</a>
</div>
<div class="clients CC col-6 col-md-4 col-lg-3">
<a href="#">
<figure class="client-container">
<img class="img-fluid brand-img" src="https://toppng.com/uploads/preview/book-11549420966kupbnxvyyl.png" alt="Logo">
<figcaption class="product-desc">
<P>CN</P>
</figcaption>
<figcaption class="product-desc2">
<p>C</p>
</figcaption>
</figure>
</a>
</div>
<div class="clients D col-6 col-md-4 col-lg-3">
<a href="#">
<figure class="client-container">
<img class="img-fluid brand-img" src="https://toppng.com/uploads/preview/black-electric-guitar-11530936970df8gvueqvz.png" alt="Logo">
<figcaption class="product-desc">
<P>d</P>
</figcaption>
<figcaption class="product-desc2">
<p>T</p>
</figcaption>
</figure>
</a>
</div>
<div class="clients B D col-6 col-md-4 col-lg-3">
<a href="#">
<figure class="client-container">
<img class="img-fluid brand-img" src="https://w7.pngwing.com/pngs/454/512/png-transparent-red-and-white-guitar-red-white-guitar-red-guitar-folk-guitar-thumbnail.png" alt="Logo">
<figcaption class="product-desc">
<P>Bl</P>
</figcaption>
<figcaption class="product-desc2">
<p>E</p>
</figcaption>
</figure>
</a>
</div>
<div class="clients B D CC col-6 col-md-4 col-lg-3">
<a href="#">
<figure class="client-container">
<img class="img-fluid brand-img" src="https://toppng.com/uploads/preview/book-11549420966kupbnxvyyl.png" alt="Logo">
<figcaption class="product-desc">
<P>BN</P>
</figcaption>
<figcaption class="product-desc2">
<p>S</p>
</figcaption>
</figure>
</a>
</div>
<div class="clients B C D M col-6 col-md-4 col-lg-3">
<a href="#">
<figure class="client-container">
<img class="img-fluid brand-img" src="https://w7.pngwing.com/pngs/454/512/png-transparent-red-and-white-guitar-red-white-guitar-red-guitar-folk-guitar-thumbnail.png" alt="Logo">
<figcaption class="product-desc">
<P>B</P>
</figcaption>
<figcaption class="product-desc2">
<p>I</p>
</figcaption>
</figure>
</a>
</div>
<div class="clients B M C D CC col-6 col-md-4 col-lg-3">
<a href="#">
<figure class="client-container">
<img class="img-fluid brand-img" src="https://w7.pngwing.com/pngs/454/512/png-transparent-red-and-white-guitar-red-white-guitar-red-guitar-folk-guitar-thumbnail.png" alt="Logo">
<figcaption class="product-desc">
<P>N</P>
</figcaption>
<div class="product-desc2">
<p>o</p>
</div>
</figure>
</a>
</div>
<div class="clients C B col-6 col-md-4 col-lg-3">
<a href="#">
<figure class="client-container">
<img class="img-fluid brand-img" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSHo3btqZiiOgTrKCGihDfnm9V5va87up2aeg&usqp=CAU" alt="Logo">
<figcaption class="product-desc">
<P>CAG</P>
</figcaption>
<figcaption class="product-desc2">
<p>Jr</p>
</figcaption>
</figure>
</a>
</div>
<div class="clients B col-6 col-md-4 col-lg-3">
<a href="#">
<figure class="client-container">
<img class="img-fluid brand-img" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSHo3btqZiiOgTrKCGihDfnm9V5va87up2aeg&usqp=CAU" alt="Logo">
<figcaption class="product-desc">
<P>Brl</P>
</figcaption>
<figcaption class="product-desc2">
<p>Sl</p>
</figcaption>
</figure>
</a>
</div>
<div class="clients B CC col-6 col-md-4 col-lg-3">
<a href="#">
<figure class="client-container">
<img class="img-fluid brand-img" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSHo3btqZiiOgTrKCGihDfnm9V5va87up2aeg&usqp=CAU" alt="Logo">
<figcaption class="product-desc">
<P>Bn</P>
</figcaption>
<figcaption class="product-desc2">
<p>SP</p>
</figcaption>
</figure>
</a>
</div>
<div class="clients B col-6 col-md-4 col-lg-3">
<a href="#">
<figure class="client-container">
<img class="img-fluid brand-img" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSHo3btqZiiOgTrKCGihDfnm9V5va87up2aeg&usqp=CAU" alt="Logo">
<figcaption class="product-desc">
<P>B</P>
</figcaption>
<figcaption class="product-desc2">
<p>Wc</p>
</figcaption>
</figure>
</a>
</div>
</div>
</div>
<button onclick="togglesec1()" id="moreBtn">
<p class="pink">Show More</p>
<img class="showmore" src="./images/load-more.png" alt="">
</button>
</div>
</section>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg OMhuP IlRH9sENBO0LRn5q 8nbTov4 1p" crossorigin="anonymous"></script>
<script>
$(document).ready(function() {
$('.list-inline-item').click(function() {
const value = $(this).attr('data-filter');
if (value == 'all') {
$('.clients').show('1000');
} else {
$('.clients').not('.' value).hide('1000');
$('.clients').filter('.' value).show('1000');
}
$(this).addClass('active').siblings().removeClass('active')
})
})
</script>
</body>
轉載請註明出處,本文鏈接:https://www.uj5u.com/ruanti/422383.html
標籤:
下一篇:輸入php代碼后內容不出現
