Question

最近我遇到这个问题，请帮助我。我试图展示＆amp;用这个函数隐藏一个div。

HTML：

<div class="question_frame">
    <div class='help'>?</div>
    <div class="help_content">Show & hide this text</div>
</div>

JavaScript的：

$(".question_frame").find( '.help' ).click(function(){
    $( this ).find( '.help_content' ).toggle(1000);
});

Answer 1

兄弟而不是孩子，请使用.next()：

$(".question_frame").find( '.help' ).click(function(){
    $( this ).next( '.help_content' ).toggle(1000);
});

该事件在.help上触发，而不在.question_frame上触发。这里this指的是触发事件的元素，即.help。

＆＃13;

$(function () {
  $( '.help_content' ).hide();
  $(".question_frame").find( '.help' ).click(function(){
    $( this ).next( '.help_content' ).toggle(1000);
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="question_frame">
  <div class='help'>?</div>
  <div class="help_content">Show & hide this text</div>
</div>

＆＃13;

请参阅上面的工作代码段。

如果介于两者之间，可以使用.nextAll()：

＆＃13;

$(function () {
  $( '.help_content' ).hide();
  $(".question_frame").find( '.help' ).click(function(){
    $( this ).nextAll( '.help_content' ).first().toggle(1000);
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="question_frame">
  <div class='help'>?</div>
  <div class="some">Some?</div>
  <div class="help_content">Show & hide this text</div>
</div>

＆＃13;

或者，您可以使用.siblings()：

＆＃13;

$(function () {
  $( '.help_content' ).hide();
  $(".question_frame").find( '.help' ).click(function(){
    $( this ).siblings( '.help_content' ).toggle(1000);
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="question_frame">
  <div class='help'>?</div>
  <div class="some">Some?</div>
  <div class="help_content">Show & hide this text</div>
</div>

＆＃13;

JS这个功能问题

1 个答案: