Question

如果点击.ab-head，如何隐藏ab-head的内容？当我点击content并且parent div可见时，也会隐藏。使用我现在的代码，它几乎可以工作但是当我点击其中一个所有内容都被切换。

如何仅在$(document).ready(function(){ $(".ab-head").click(function(){ $(".ab-content").toggle(); }); $(".ab-content").click(function(){ $(".ab-content").toggle(); }); });上维护此功能？有任何想法吗？

<div class="ab-container">
    <div class="ab-head">
        <h1>some name 1</h1>
    </div>
    <div class="ab-content">
        <p>some text bla bla bla 1</p>
    </div>
</div>
<div class="ab-container">
    <div class="ab-head">
        <h1>some name 2</h1>
    </div>
    <div class="ab-content">
        <p>some text bla bla bla 2</p>
    </div>
</div>

$file1="a:b
markus:lanz
peter:heinrichs
lach:schnell";

$file2="b:c
lanz:hallo
heinrichs:gruss
schnell:langsam";

$a1 = explode("\n",$file1);
$a2 = explode("\n",$file2);

if(count($a1) != count($a2)) die("files don't match!");

$final=array();
foreach($a1 as $k=>$line){
   $l1 = explode(":",$line);
   $l2 = explode(":",$a2[$k]);
   $final[]=$l1[0].':'.$l2[1];
}
print_r($final);

示例：https://jsfiddle.net/yppn4nex/

Answer 1

只需切换.ab-content的下一个实例：

$(".ab-head").click(function(){
  $(this).next(".ab-content").toggle();
});

您还可以使用<div class="ab-content">关键字引用用户点击的当前this：

$(".ab-content").click(function(){
  $(this).toggle();
});

虽然如果您想在点击内容时隐藏内容，可能最好按照其下行建议的方式做一些事情。

快速演示：

$(".ab-container").on("click", function(){
  $(this).find(".ab-content").toggle();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="ab-container">
  <div class="ab-head">
    <h1>some name 1</h1>
  </div>
  <div class="ab-content">
    <p>some text bla bla bla 1</p>
  </div>
</div>

<div class="ab-container">
  <div class="ab-head">
    <h1>some name 2</h1>
  </div>
  <div class="ab-content">
    <p>some text bla bla bla 2</p>
  </div>
</div>

Answer 2

您可以使用事件委派来执行此操作：
检查以下代码段

$('.ab-container').on('click', '.ab-content ,.ab-head', function() {

  $(this).closest('.ab-container').find('.ab-content').toggle();

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="ab-container">
  <div class="ab-head">
    <h1>some name 1</h1>
  </div>
  <div class="ab-content">
    <p>some text bla bla bla 1</p>
  </div>
</div>

<div class="ab-container">
  <div class="ab-head">
    <h1>some name 2</h1>
  </div>
  <div class="ab-content">
    <p>some text bla bla bla 2</p>
  </div>
</div>

jQuery切换onclick父元素

2 个答案: