jQuery 鼠标悬停和切换问题答案

【问题标题】：jQuery mouseover and toggle problemjQuery 鼠标悬停和切换问题
【发布时间】：2011-04-01 05:48:24
【问题描述】：

我试图让一个链接出现在鼠标悬停上，当点击时，让链接切换一个 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>

查询：

    <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>

鼠标悬停有效，但切换无效。当我单击链接时，没有任何反应。什么给了？

【问题讨论】：

标签： jquery toggle mouseover show-hide

【解决方案1】：

在这里演示

http://jsfiddle.net/JE8Bz/

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

2) 你在 click() 函数的参数中放了一个 $

【讨论】：

不敢相信我没有看到。 :-)
我也看不到。但就是想不通为什么 hide() 在 jsfiddle 中不起作用，所以试着看看它。
如此接近，但由于某种原因，在单击链接时切换会自行打开和关闭，换句话说，当我单击它时，
在显示和隐藏之间闪烁.
我们只是想让您的代码正常工作。如果你只想切换togglediv的显示，只需注释掉代码$(".togglediv").hide();在您的 click() 处理程序中
感谢所有帮助，但闪烁仍然发生。单击链接时，div 会自行显示并永远隐藏。我只是不明白为什么。

【解决方案2】：

你的链接没有下一个兄弟（它是span 中唯一的东西，这是div 中唯一的东西），所以在它上面调用next 将返回一个空集。也许使用closest 到包含的div，然后next 过去：

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

【讨论】：

谢谢，但还是没有雪茄。单击链接时，我只会收到http://domain.com/#。
@Andrew：见Quincy's answer，还有第二个问题。

【解决方案3】：

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

更新小提琴

【讨论】：

它工作正常，非常感谢。但是我怎样才能使它更加动态，这意味着我有一个非常大的列表项列表，这个函数应该存在？
为他们写<a href="javascript:ToggleDivs('1')">+</a> 不可能是好的...
我确实写了它，以便您可以将 1 更改为任何数字，然后给相应的 div 一个 'ToggleDiv' 的 ID，然后是数字。其他任何事情，这似乎是一个不同的问题
是的，我明白了，我解释得很糟糕，因为我的意思是列表项是动态生成的，所以相应的 div 也应该是。
您可以同时生成两者，但如果 div 完全相同，则另一种方法会更有效。否则，我可以向您展示一些基本的 php 来生成它们。