jquery 隐藏手风琴 header/title

Question

我正在创建一个模板，供同事在所见即所得编辑器（我是一名教师）中使用手风琴，这样他们就可以轻松地向每个模板添加内容。它将有多余的 headers/content 供同事使用，但没有显示任何类似“title_name”的内容作为 header 的文本。 HTML 是：

        <div class="accordion">
           <div class="card">
              <div class="card-header" data-toggle="collapse">
                 <h2 class="card-title">
                    Accordion 1
                 </h2>
              </div>
              <div class="collapse">
                 <div class="card-body">
                    <p>Insert Accordion 1 of 4 content here.</p>
                 </div>
              </div>
           </div>
           <div class="card">
              <div class="card-header">
                 <h2 class="card-title">
                    Accordion 2
                 </h2>
              </div>
              <div class="collapse">
                 <div class="card-body">
                    <p>Insert Accordion 2 of 4 content here.</p>
                 </div>
              </div>
           </div>
           <div class="card">
              <div class="card-header">
                 <h2 class="card-title">
                    Accordion 3
                </h2>
              </div>
              <div class="collapse">
                 <div class="card-body">
                    <p>Insert Accordion 3 of 4 content here.</p>
                 </div>
              </div>
           </div>
           <div class="card">
              <div class="card-header">
                <h2 class="card-title">
                    title_name
                 </h2>
              </div>
              <div class="collapse">
                 <div class="card-body">
                    <p>Insert Accordion 4 of 4 content here.</p>
                 </div>
              </div>
           </div>
       </div>

我的jquery是

$(".card-header").each(function(){ ($(this).text() === "title_name") ? $(this).hide() : $(this).show()});

帮助将不胜感激:)

Answer 1

您可以使用 :contains of jquery。由于您在 class card-header 的 div 内有 h2 标签，jquery 无法获取 title_name 的文本。我验证了这段代码应该有效。

  $("div.card-header:contains(title_name)").hide();

jquery 隐藏手风琴 header/title

jquery to hide accordion header/title

html

javascript

jquery

show-hide