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

只需在小提琴代码中添加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'委托（版本1.7中已弃用live方法）。鉴于您的代码结构，您不需要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事件添加到动态添加的元素，那么你可以使用这个代码

person

单击（切换）显示div，使其无法正常工作

4 个答案: