Question

当我点击按钮时，我尝试使用jquery动画制作带文本的div。没有任何事情发生，但Chrome的javascript控制台中没有出现任何错误。所以我不知道自己做错了什么。

＆＃13;

$(function() {
    	$('#myb').click(function(event) {
    		alert("I'm hit");
    		$(this).parent('div.module').find('div.body').toggle(1);
    	});
    });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="module">
    	<div class="caption">
    		<span>Module Caption</span>
    		<!-- <img src="?" /> -->
    		<div class="pic"></div>
    		<button type="button" id="myb">show</button>
    	</div>
    	<div class="body">
    		Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
    		Aliquam eget enim id neque aliquet porttitor. Suspendisse
    		nisl enim, nonummy ac, nonummy ut, dignissim ac, justo.
    		Aenean imperdiet semper nibh. Vivamus ligula. In in ipsum
    		sed neque vehicula rhoncus. Nam faucibus pharetra nisi.
    		Integer at metus. Suspendisse potenti. Vestibulum ante
    		ipsum primis in faucibus orci luctus et ultrices posuere
    		cubilia Curae; Proin quis eros at metus pretium elementum.
    	</div>
    </div>

＆＃13;

Answer 1

.parent()获取指定的所有子项的直接父项。在您的情况下，它会获得$("#myb")的父级，即<div class="caption">。

指定.parent("div.module")相当于搜索<div class="caption"> div.module。当然，没有找到结果，jQuery无声地失败，没有任何隐藏。

由于您真正想要的是div.module，即div.caption的父级，您应该执行以下操作：

$(this).parent().parent().find('div.body').toggle(1);

Answer 2

使用closest('div.module')代替parent()

parent（）方法遍历其中每个的直接父级 DOM树中的元素并从中构造一个新的jQuery对象匹配元素。

$(function() {
      $('#myb').click(function(event) {
        alert("I'm hit");
        $(this).closest('div.module').find('div.body').toggle();
      });
    });

<强>段：

$(function() {
  $('#myb').click(function(event) {
    alert("I'm hit");
    $(this).closest('div.module').find('div.body').toggle();
  });
});

.module {
  border: solid;
  border-color: #FCAA45;
  border-width: 10px;
  margin: 15px;
  width: 300px;
}
.body {
  margin: 10px;
  width: 100%;
}
.caption {
  margin: 10px;
  border-width: 10px;
  width: 100%;
  background-color: #AAAAFF;
}
.pic {
  float: right;
  height: 100px;
  width: 50px;
  border: solid;
  border-color: #AAFFAA;
  border-width: 10px;
  background-color: #6A33FA;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div class="module">
  <div class="caption">
    <span>Module Caption</span>
    <!-- <img src="?" /> -->
    <div class="pic"></div>
    <button type="button" id="myb">show</button>
  </div>
  <div class="body">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam eget enim id neque aliquet porttitor. Suspendisse nisl enim, nonummy ac, nonummy ut, dignissim ac, justo. Aenean imperdiet semper nibh. Vivamus ligula. In in ipsum sed neque vehicula rhoncus.
    Nam faucibus pharetra nisi. Integer at metus. Suspendisse potenti. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin quis eros at metus pretium elementum.
  </div>
</div>

Answer 3

尝试用.parents()替换div.module:first .parent()

$(function() {
  $('#myb').click(function(event) {
    alert("I'm hit");
    $(this).parents("div.module:first").find("div.body").toggle(1);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="module">
  <div class="caption">
    <span>Module Caption</span>
    <!-- <img src="?" /> -->
    <div class="pic"></div>
    <button type="button" id="myb">show</button>
  </div>
  <div class="body">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam eget enim id neque aliquet porttitor. Suspendisse nisl enim, nonummy ac, nonummy ut, dignissim ac, justo. Aenean imperdiet semper nibh. Vivamus ligula. In in ipsum sed neque vehicula rhoncus.
    Nam faucibus pharetra nisi. Integer at metus. Suspendisse potenti. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin quis eros at metus pretium elementum.
  </div>
</div>

Answer 4

您还可以使用.siblings()：

$(this).parent('div.caption').siblings('div.body').toggle();

jquery .toggle（）：是否可以用文本隐藏div？

4 个答案: