Question

我试图在鼠标悬停时显示一个链接，点击后，让链接切换一个div（显示/隐藏）。我现在的情况如下。

PHP：

<li class="test">    <div class="link" style="display:none">
                <span class="toggle"><a href="#">link</a></span>
                                    </div>
    <div class="togglediv"><p>lorem ipsum</p></div>
</li>

JQUERY：

    <script language="javascript">
    jQuery(document).ready(function($){
                  $('.test').bind('mouseenter mouseleave', function(e){

                      var fade_type = e.type == 'mouseenter' ? 'fadeIn' : 'fadeOut';
                      $(this).find('.link')[fade_type]();

                  }).find('.toggle a').click(function($){
$(".togglediv").hide();
      $(this).toggleClass("active").next().slideToggle("slow");
    return false;
    });
    });
    </script>

鼠标悬停工作，但切换不会。当我点击链接时，没有任何反应。是什么给了什么？

Answer 1

演示

http://jsfiddle.net/JE8Bz/

1）作为问题T.J.克劳德提到了

2）你在click()函数

的参数中加了一个$

Answer 2

您的链接没有下一个兄弟（这是span中唯一的内容，这是div中唯一的内容），因此在其上调用next将返回一个空集。也许使用closest转到包含div，然后next继续：

$(this).toggleClass("active").closest('div').next().slideToggle("slow");

Answer 3

这是一个例子： http://jsfiddle.net/mazzzzz/MeAnJ/9/

更新小提琴

jQuery鼠标悬停和切换问题

3 个答案: