仅为每个手风琴选择第一层的外部元素

时间：2020-03-12 17:25:55

标签： javascript jquery

请在下面查看我的示例。有一些手风琴。 如果将它们打开，则其中一些的顶部将显示一条红线。

每个手风琴上都需要用红线表示，但是我不允许通过手动更改HTML来更改/添加类名。因为此代码是由我的应用程序生成的。

jsfiddle 

jQuery(".panel-heading").addClass("accordion");
jQuery(".list-group").addClass("accordion-panel");

jQuery(".outer").find(".widget-static-block:first").addClass("red");

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

for (i = 0; i < acc.length; i++) {
  acc[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var panel = this.nextElementSibling;
    if (panel.style.display === "block") {
      panel.style.display = "none";
    } else {
      panel.style.display = "block";
    }
  });
}
.accordion {
  background-color: #eee;
  color: #444;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
  transition: 0.4s;
}

.active, .accordion:hover {
  background-color: #ccc; 
}

.accordion-panel {
  padding: 0 18px;
  display: none;
  background-color: white;
  overflow: hidden;
}

.red { background: red; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="foo" class="outer">
  <div class="widget widget-static-block">
    <div class="panel panel-default">
      <div class="panel-heading">
          <h2 style="margin-top: 5px; color: #585858;">AAA</h2>
      </div>

      <ul class="list-group">
          <li class="list-group-item">
            <div class="widget widget-static-block">
                Lorem Ipsum 1
            </div>
          </li>
          <li class="list-group-item">
            <div class="widget widget-static-block">
                Lorem Ipsum 2
            </div>
          </li>
          <li class="list-group-item">
            <div class="widget widget-static-block">
                Lorem Ipsum 3
            </div>
          </li>
      </ul>
    </div>
  </div>
  <div class="widget widget-static-block">
    <div class="panel panel-default">
      <div class="panel-heading">
          <h2 style="margin-top: 5px; color: #585858;">BBB</h2>
      </div>

      <ul class="list-group">
          <li class="list-group-item">
            <div class="widget widget-static-block">
                Lorem Ipsum A
            </div>
          </li>
          <li class="list-group-item">
            <div class="widget widget-static-block">
                Lorem Ipsum B
            </div>
          </li>
          <li class="list-group-item">
            <div class="widget widget-static-block">
                Lorem Ipsum C
            </div>
          </li>
      </ul>
    </div>
  </div>
</div>

<div id="bar" class="outer">
  <div class="widget widget-static-block">
    <div class="panel panel-default">
      <div class="panel-heading">
          <h2 style="margin-top: 5px; color: #585858;">CCC</h2>
      </div>

      <ul class="list-group">
          <li class="list-group-item">
            <div class="widget widget-static-block">
                Lorem Ipsum 10
            </div>
          </li>
          <li class="list-group-item">
            <div class="widget widget-static-block">
                Lorem Ipsum 20
            </div>
          </li>
          <li class="list-group-item">
            <div class="widget widget-static-block">
                Lorem Ipsum 30
            </div>
          </li>
      </ul>
    </div>
  </div>
  <div class="widget widget-static-block">
    <div class="panel panel-default">
      <div class="panel-heading">
          <h2 style="margin-top: 5px; color: #585858;">DDD</h2>
      </div>

      <ul class="list-group">
          <li class="list-group-item">
            <div class="widget widget-static-block">
                Lorem Ipsum AA
            </div>
          </li>
          <li class="list-group-item">
            <div class="widget widget-static-block">
                Lorem Ipsum BB
            </div>
          </li>
          <li class="list-group-item">
            <div class="widget widget-static-block">
                Lorem Ipsum CC
            </div>
          </li>
      </ul>
    </div>
  </div>
</div>

1 个答案:

答案 0 :(得分：2)

您需要使用.children()：

jQuery(".outer").children(".widget-static-block").addClass("red");

代替.find()：

jQuery(".outer").find(".widget-static-block").addClass("red");

.children（）方法与.find（）的不同之处在于.children（）仅沿DOM树向下移动一个级别，而.find（）可以遍历多个级别以选择后代元素（孙子元素等）。也是

作为替代方案，您可以使用特定的选择器仅查找第一级下移元素。

jQuery(".outer").find("> .widget-static-block").addClass("red") 

jQuery("p:first").css("background", "limegreen");

jQuery(".panel-heading").addClass("accordion");
jQuery(".list-group").addClass("accordion-panel");

jQuery(".outer").children(".widget-static-block").addClass("red");

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

for (i = 0; i < acc.length; i++) {
  acc[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var panel = this.nextElementSibling;
    if (panel.style.display === "block") {
      panel.style.display = "none";
    } else {
      panel.style.display = "block";
    }
  });
}
.accordion {
  background-color: #eee;
  color: #444;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
  transition: 0.4s;
}

.active, .accordion:hover {
  background-color: #ccc; 
}

.accordion-panel {
  padding: 0 18px;
  display: none;
  background-color: white;
  overflow: hidden;
}

.red { background: red; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="foo" class="outer">
  <div class="widget widget-static-block">
    <div class="panel panel-default">
      <div class="panel-heading">
          <h2 style="margin-top: 5px; color: #585858;">AAA</h2>
      </div>

      <ul class="list-group">
          <li class="list-group-item">
            <div class="widget widget-static-block">
                Lorem Ipsum 1
            </div>
          </li>
          <li class="list-group-item">
            <div class="widget widget-static-block">
                Lorem Ipsum 2
            </div>
          </li>
          <li class="list-group-item">
            <div class="widget widget-static-block">
                Lorem Ipsum 3
            </div>
          </li>
      </ul>
    </div>
  </div>
  <div class="widget widget-static-block">
    <div class="panel panel-default">
      <div class="panel-heading">
          <h2 style="margin-top: 5px; color: #585858;">BBB</h2>
      </div>

      <ul class="list-group">
          <li class="list-group-item">
            <div class="widget widget-static-block">
                Lorem Ipsum A
            </div>
          </li>
          <li class="list-group-item">
            <div class="widget widget-static-block">
                Lorem Ipsum B
            </div>
          </li>
          <li class="list-group-item">
            <div class="widget widget-static-block">
                Lorem Ipsum C
            </div>
          </li>
      </ul>
    </div>
  </div>
</div>

<div id="bar" class="outer">
  <div class="widget widget-static-block">
    <div class="panel panel-default">
      <div class="panel-heading">
          <h2 style="margin-top: 5px; color: #585858;">CCC</h2>
      </div>

      <ul class="list-group">
          <li class="list-group-item">
            <div class="widget widget-static-block">
                Lorem Ipsum 10
            </div>
          </li>
          <li class="list-group-item">
            <div class="widget widget-static-block">
                Lorem Ipsum 20
            </div>
          </li>
          <li class="list-group-item">
            <div class="widget widget-static-block">
                Lorem Ipsum 30
            </div>
          </li>
      </ul>
    </div>
  </div>
  <div class="widget widget-static-block">
    <div class="panel panel-default">
      <div class="panel-heading">
          <h2 style="margin-top: 5px; color: #585858;">DDD</h2>
      </div>

      <ul class="list-group">
          <li class="list-group-item">
            <div class="widget widget-static-block">
                Lorem Ipsum AA
            </div>
          </li>
          <li class="list-group-item">
            <div class="widget widget-static-block">
                Lorem Ipsum BB
            </div>
          </li>
          <li class="list-group-item">
            <div class="widget widget-static-block">
                Lorem Ipsum CC
            </div>
          </li>
      </ul>
    </div>
  </div>
</div>

相关问题
最新问题