在点击（切换）时显示div使其无法正常工作

Question

我在让它开始工作时遇到了一些困难。 基本上，我想隐藏一个div，但单击上一个div时将其显示，以使其不悬停。

我已经将上一篇文章用作指南，但似乎无法使其正常工作。 JS的新手，因此非常感谢您的帮助。

这是到目前为止我所掌握的东西： https : //jsfiddle.net/ss5308b2/3/

 <div class="detail-service">
<div class="card-link">
   <h3>Basic Wash</h3>
</div>
<div class="card-content">
 <ul>
     <li>Wash vehicle</li>
     <li>Remove any road dirt and contaminates</li>
     <li>Clean wheels safely with acid free cleaner</li>
     <li>Dry using a non scratch micro fibre cloth</li>
     <li>Spray polish applied to vehicle</li>
 </ul>
</div>
<p>£10.00</p>

$('.card-link').live('click', function(){
$(this).next('.card-content').toggle();
});

$(document).ready(function(){
$('.card-content').hide();
});

Answer 1

只需在Fiddle代码中添加jQuery，并在以下代码中替换代码：

$(this).next().toggle();

Answer 2

您需要准备好在dom内部使用jquery的代码，也要在您的小提琴中不包含jquery，最后使用on代替live

$(document).ready(function(){
    $('.card-content').hide();

    $('.card-link').on('click', function(){
        $(this).next('.card-content').toggle();
    });
});

固定提琴： https : //jsfiddle.net/ss5308b2/7/

Answer 3

将'live'替换为'on'委托（ live方法在1.7版中已弃用）。 根据代码的结构，您不需要next()查找。 只需针对课程card-content 。

 $('.card-content').hide();

$('.card-link').on('click', function(){
    $('.card-content').toggle();
});

https://jsfiddle.net/ss5308b2/8/

Answer 4

我认为您只需要在小提琴中添加JQuery框架即可。 并且您的代码将正常运行。 但是您不应该使用.live方法，因为[ http://api.jquery.com/live/]中已弃用该方法。

从jQuery 1.7开始，不推荐使用.live（）方法。 使用.on（）附加事件处理程序。 较旧版本的jQuery的用户应优先使用.delegate（）而不是.live（）。

您应将其替换为.on方法，如果要将click事件添加到动态添加的元素中，则可以使用此代码

$(document).on('click', '.card-link', function(){
    $(this).next('.card-content').toggle();
});