gpt4 book ai didi

javascript - 如果

中没有文本/内容,如何隐藏 Accordion 按钮?

转载 作者:行者123 更新时间:2023-12-03 04:07:52 27 4
gpt4 key购买 nike

我声明了一个按钮类“ Accordion ”,并在 Accordion 按钮的左侧添加了 (+) 和 (-) 图标。但是,如果 <p> </p> 中没有内容,我希望从网页中隐藏按钮。 。任何帮助将不胜感激!:

HTML

<html>
<head>
<link rel="stylesheet" href="style.css">
</head>

<body>

<h2>Accordion</h2>


<button class="accordion">Section 1</button>
<div class="panel">
<p>Lorem ipsum...</p>
</div>

<button class="accordion"></button>
<div class="panel">
<p></p>
</div>

<script src= "Accordion.js" ></script>

</body>

</html>

Javascript

var acc = document.getElementsByClassName("accordion");
var i;

for (i = 0; i < acc.length; i++) {
acc[i].onclick = function() {
this.classList.toggle("active");
var panel = this.nextElementSibling;
if (panel.style.maxHeight){
panel.style.maxHeight = null;
} else {
panel.style.maxHeight = panel.scrollHeight + "px";
}
}
}

//尝试过,但到目前为止还不起作用:

$(document).ready(function() {
if ($(".accordion").text().trim() ) {
$("accordion").show();
} else {
$("accordion").hide();
}
});

最佳答案

当没有文本时,你的 if 语句是真实的(“”在 JavaScript 中被认为是真实的)。

此外,您需要迭代 JQuery 集并检查该集的每个元素中是否存在文本。如果您想基于其中没有任何文本的 p 元素隐藏面板和按钮,那么您必须首先获取这些元素的集合,迭代它们,如果没有文本,则获取父 div 面板,然后是 Accordion 按钮(作为 div 面板的前一个兄弟)并隐藏它们:

$(document).ready(function() {
var $pElems = $("p");
$pElems.each(function(index){
if($pElems.eq(index).text().trim() === "") {
var $parentPanel = $pElems.eq(index).parent(".panel");
$parentPanel.hide();
if ($parentPanel.length > 0) {
$parentPanel.prev(".accordion").hide();
}
}
});
});

关于javascript - 如果 <p> </p> 中没有文本/内容,如何隐藏 Accordion 按钮?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44468934/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com