TypeError：$（...）。parent（...）。next（...）。fadeToggleは関数ではありません

Question

私はDjangoサイトを使用しています。これは本体に含まれているスクリプトです

$(document).ready(function(){ 
    $(".comment-reply-btn").click(function(event){ 
     event.preventDefault(); 
     $(this).parent().next(".comment-reply").fadeToggle(); 
    }) 
}) 

これは私のHTMLで

<blockquote> 
     <p>{{ comment.content }}</p> 
     <footer>by {{ comment.user }} , {{ comment.timestamp | timesince }} ago | 
      {% if comment.children.count > 0 %}{{ comment.children.count }} Comment {% endif %} 
      {% if comment.children.count > 1 %}s {% endif %} |<a class="comment-reply-btn" href="#"> Reply </a></footer> 
     <div class="comment-reply"> 
      {% for child_comment in comment.children %} 
      <blockquote> 
        <p>&mdash; {{ child_comment.content }}</p> 
        <footer>by {{ child_comment.user }} , {{ child_comment.timestamp | timesince }}ago</footer> 
       <br> 
      </blockquote> 
      {% endfor %} 
      <form method="post" action=".">{% csrf_token %} 
       {{ comment_form | crispy }} 
       <input type="hidden" name="parent_id" value="{{ comment.id }}" > 
       <input type="submit" value="Reply" class="btn btn-inverse" > 
      </form> 
     </div> 
</blockquote> 

これらは私のスクリプト（私は念のために2つを含む）は次のとおりです。

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.js"></script> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> 
<script src="http://code.jquery.com/jquery-3.1.0.slim.min.js" integrity="sha256-cRpWjoSOw5KcyIOaZNo4i6fZ9tKPhYYb6i5T9RSVJG8=" crossorigin="anonymous"></script> 

私はこのエラーを取得しています：

TypeError: $(...).parent(...).next(...).fadeToggle is not a function

私はビデオ

Answer 1

これを試してみてから、直接コードをコピーしたので、私は全く見当がつかない：2を使用してbecausingのみを使用して1 jQueryライブラリが競合を作成することもできます。私はjqueryの2.1.1バージョン

$(document).ready(function(){ 
 
    $(".comment-reply-btn").click(function(event){ 
 
     event.preventDefault(); 
 
     $(this).parent().next(".comment-reply").fadeToggle(); 
 
    }) 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<blockquote> 
 
     <p>comment.content</p> 
 
     <footer>by comment.user , comment.timestamp | timesince <a class="comment-reply-btn" href="#"> Reply </a></footer> 
 
     <div class="comment-reply"> 
 

 
      <blockquote> 
 
        <p>&mdash; child_comment.content </p> 
 
        <footer>by child_comment.user , child_comment.timestamp | timesince ago</footer> 
 
       <br> 
 
      </blockquote> 
 

 
      <form method="post" action="."> 
 
       <input type="hidden" name="parent_id" value=" comment.id " > 
 
       <input type="submit" value="Reply" class="btn btn-inverse" > 
 
      </form> 
 
     </div> 
 

 
</blockquote>

Answer 2

スリムバージョンが含まれているコードの下を参照してください。アヤックス、エフェクト、および現在非推奨のコードを除外します。 https://blog.jquery.com/2016/06/09/jquery-3-0-final-released/

Slim build

Finally, we’ve added something new to this release. Sometimes you don’t need ajax, or you prefer to use one of the many standalone libraries that focus on ajax requests. And often it is simpler to use a combination of CSS and class manipulation for all your web animations. Along with the regular version of jQuery that includes the ajax and effects modules, we’re releasing a “slim” version that excludes these modules. All in all, it excludes ajax, effects, and currently deprecated code. The size of jQuery is very rarely a load performance concern these days, but the slim build is about 6k gzipped bytes smaller than the regular version – 23.6k vs 30k. These files are also available in the npm package and on the CDN:

私は推測する、トグルもjqueryのの影響下に来ます。だから、jQueryのかJquery.min