Question

我今晚的任务是在点击主导航链接时显示和隐藏div（最终实际上是两个div或更多）。这将在他们点击主导航的另一部分时隐藏div。

完成

特别感谢大家.Matchu ....

现在代码如下，并且有效......

<script type="text/javascript">
$(document).ready(function(){
        $("#tagcloud").hide();
            blogLink = $("ul.mainnav li.blog a").click(function () {    
            $("#tagcloud").show();});$("ul.mainnav li a").not       (blogLink).click(function () {    
            $("#tagcloud").hide();});      

            });
</script>

如果有人可以看到任何可能的问题，请在www.alwaystwisted.com/index.html上使用，请告诉我....

另外，刚刚订购了JQuery 1.3的书......所以希望能够让我的头脑有点或更好......

问候

麦粒肿

Answer 1

更新了最新上传的第三个时间！

在你将tagcloud切换到一个类之前，使用你给我的页面，这是我可以在Firebug控制台中工作的内容：

blogLink = $("ul.mainnav li.blog a").click(function () {
    $("#tagcloud").show();
});
$("ul.mainnav li a").not(blogLink).click(function () {
    $("#tagcloud").hide();
});

试一试：）

关于那个“使用类不是ID的东西”，就在我看到你实际上要做的事情之前。如果只有一个实例，你应使用ID - 抱歉混淆！

Answer 2

我不确定我在没有看到一些HTML的情况下理解你的目标，但是你可以先检查几件事。

$（'ul.mainnav）...您需要关闭该字符串
$（this）.next（“＃tagcloud”）...你可以简单地使用$（“＃tagcloud”），因为你应该在页面上有唯一的ID。

如果你发布一些可能对人有帮助的代码。

Answer 3

除了此线程中已经提到的语法错误之外，您可能还需要返回false;在这些链接点击上，否则您的操作将会发生，并且链接仍然会转到任何地方。

当然，这为可访问性论点打开了大门。不过，在我担心这方面之前，我很快就会得到一个有效的演示。

Answer 4

我会开始：click上的li.blogcontent处理程序正在冒泡到ul.mainnav并执行其click处理程序。

<script type="text/javascript">
$(document).ready(function(){
    $('li.blogcontent').click(function(e) { 
        e.stopPropagation();   // Stop the bubbling up to its parent
        $("#tagcloud").show();
    });
    $('ul.mainnav').click(function() {
        $("#tagcloud").hide(); 
    });                            
});
</script>

或使用事件委托和冒泡（我没有测试过，但应该关闭）：

<script type="text/javascript">
$(document).ready(function(){
    $('ul.mainnav').click(function(e) {
        var target = $(e.target);
        if(target.hasClass('blogcontent')){
            $("#tagcloud").show();
        }
        else{
            $("#tagcloud").hide(); 
        }
    });                            
});
</script>

Answer 5

从li元素冒泡到ul容器的事件可能是个问题。我对jQuery有点不熟悉，但如果它直接传递DOM事件而不修改它（我怀疑它是因为jQuery的作者反对修改现有对象），那么我建议不要只使用preventDefault（），因为它是所有浏览器不支持。应该在你的工具带中有一个方法来阻止事件和防止冒泡，例如

function stopEvent(event){
   event.preventDefault();
   event.stopPropagation();
   event.stopped = true;
}

我试图在特定的链接点击上显示一些div

5 个答案: