jquery.children仅适用于第一个孩子

Question

我想点击每个父母点击viewDidDisapear幻灯片课程，因此我正在使用.slideToggle()来访问它。但正如您在片段中看到的那样，它仅适用于第一个div！

我也使用了.children()代替.find()但是徒劳无功。:(
如果有人能告诉我我的问题，我很感激。

.children()

$(document).ready(function() {
	$("#open").click(function() {
       $(this).children('#slide').slideToggle();
    });
});

*{
 margin:0;
 padding:0;
}
body{
 background-color:#ecf0f5;
 overflow-x: hidden;
}
.divider {
  height: 1px;
  width:100%;
  display:block; /* for use on default inline elements like span */
  margin: 9px 0;
  overflow: hidden;
  background-color: #9b9b9b;
  margin-top:2px !important;
}
.pointer{
	cursor:pointer;
}.slide{
	background:#e2e2e2;
	padding:20px;
	display:none;
	margin:10px;
}.full{
  width:100%;
}.width{
  width:90%;
}

Answer 1

多次使用相同的id无效。使用class es作为js部分，它将正常工作。

$(document).ready(function() {
  $(".open").click(function() {
    $(this).children('.slide').slideToggle();
  });
});

检查一下，让我知道您的反馈。谢谢！

＆＃13;

＆＃13;

$(document).ready(function() {
  $(".open").click(function() {
    $(this).children('.slide').slideToggle();
  });
});

＆＃13;

* {
  margin: 0;
  padding: 0;
}
body {
  background-color: #ecf0f5;
  font-family: IRANSans;
  overflow-x: hidden;
}
.divider {
  height: 1px;
  width: 100%;
  display: block;
  /* for use on default inline elements like span */
  margin: 9px 0;
  overflow: hidden;
  background-color: #9b9b9b;
  margin-top: 2px !important;
}
.pointer {
  cursor: pointer;
}
.slide {
  background: #e2e2e2;
  padding: 20px;
  display: none;
  margin: 10px;
}
.full {
  width: 100%;
}
.width {
  width: 90%;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="full pointer open" style="background:#f4f4f4;display:inline-block;padding:7px 14px;margin:0;">
  <input type="checkbox" style="-webkit-transform:scale(1.15);" />
  <br>
  <div class="slide width" id="slide">
    txt
  </div>
</div>
<div class="divider" style="margin:0;"></div>
<div class="full pointer open" style="background:#f4f4f4;display:inline-block;padding:7px 14px;margin:0;">
  <input type="checkbox" style="-webkit-transform:scale(1.15);" />
  <br>
  <div class="slide width" id="slide">
    txt
  </div>
</div>
<div class="divider" style="margin:0;"></div>
<div class="full pointer open" style="background:#f4f4f4;display:inline-block;padding:7px 14px;margin:0;">
  <input type="checkbox" style="-webkit-transform:scale(1.15);" />
  <br>
  <div class="slide width" id="slide">
    txt
  </div>
</div>
<div class="divider" style="margin:0;"></div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

document中

id元素应该是唯一的。使用class替换id #open #slide id位html和.open选项，例如.slide， javascript

$(document).ready(function() { $(".open").click(function() { $(this).children(".slide").slideToggle(); }); });

＆＃13;

＆＃13;

* {
  margin: 0;
  padding: 0;
}
body {
  background-color: #ecf0f5;
  font-family: IRANSans;
  overflow-x: hidden;
}
.divider {
  height: 1px;
  width: 100%;
  display: block;
  /* for use on default inline elements like span */
  margin: 9px 0;
  overflow: hidden;
  background-color: #9b9b9b;
  margin-top: 2px !important;
}
.pointer {
  cursor: pointer;
}
.slide {
  background: #e2e2e2;
  padding: 20px;
  display: none;
  margin: 10px;
}
.full {
  width: 100%;
}
.width {
  width: 90%;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="full pointer open" style="background:#f4f4f4;display:inline-block;padding:7px 14px;margin:0;">
  <input type="checkbox" style="-webkit-transform:scale(1.15);" />
  <br>
  <div class="slide width" class="slide">
    txt
  </div>
</div>
<div class="divider" style="margin:0;"></div>
<div class="full pointer open" style="background:#f4f4f4;display:inline-block;padding:7px 14px;margin:0;">
  <input type="checkbox" style="-webkit-transform:scale(1.15);" />
  <br>
  <div class="slide width">
    txt
  </div>
</div>
<div class="divider" style="margin:0;"></div>
<div class="full pointer open" style="background:#f4f4f4;display:inline-block;padding:7px 14px;margin:0;">
  <input type="checkbox" style="-webkit-transform:scale(1.15);" />
  <br>
  <div class="slide width">
    txt
  </div>
</div>
<div class="divider" style="margin:0;"></div>

＆＃13;

{{1}}

＆＃13;

＆＃13;

＆＃13;