javascript - 如果<p> </p>中没有TEXT / CONTENT，如何隐藏手风琴按钮？ - Thinbug

如果<p> </p>中没有TEXT / CONTENT，如何隐藏手风琴按钮？

时间：2017-06-10 02:25:35

标签： javascript html

我已经宣布了一个按钮类＆＃39;手风琴＆＃39;，并在手风琴按钮的左侧添加了一个（+）和（ - ）图标。但是，如果<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();
    }
});

2 个答案:

答案 0 :(得分：1)

当没有文字时，你的if语句是真的（“”在javascript中被认为是真实的。）

此外，您需要迭代JQuery集并检查集合的每个元素中是否存在文本。如果你想根据$_SESSION['valueToSearch'] = $_GET['valueToSearch'];元素隐藏面板和按钮，那么你必须首先得到它们的集合，迭代它们，如果没有文本，那么得到父div面板然后是手风琴按钮（作为div面板的前一个兄弟）并隐藏它们：

答案 1 :(得分：0)

$('.panel:has(p:empty)').prev('.accordion').hide();