Working DEMO

Question

我使用jquery时遇到问题。当我点击导航中的ul li时，我的内容必须可见。

但我遗漏了一些东西，当我点击时，没有任何反应。我不确定为什么会这样。请看看底部附近提供的小提琴

以下是代码：

$(document).ready(function(){ 
    $("ul.topnav > li.one").click(function() {
        $('.content').hide(500).fadeOut(400);
        if ($(this).next().is(':hidden') == true) {
            $(this).next().show(400).fadeIn(500);
        } 
    });

    $('.content').hide();
});

<ul class="topnav">
    <li class="one"><a href="#">test</a></li>
    <li>second</li>
</ul>

<div class="content">Some content here</div>

这是一个小提琴http://jsfiddle.net/2pBge/

Answer 1

首先，您的活动不会被解雇。只需为ul.topnav设置点击监听器并委派事件：

$（＆＃34; ul.topnav＆＃34;）。on（＆＃34; click＆＃34;，＆＃34; li.one＆＃34;，function（）{...}）; < / p>

然后，删除其余的废话并使用.toggle()：

$（＆＃39;。内容＆＃39）进行切换（）;

Working DEMO

$(document).ready(function(){ 
    $("ul.topnav").on("click", "li.one", function() {
        console.log('clicked!');
        $('.content').toggle();
    });

    $('.content').hide();
});

Answer 2

你去吧

http://jsfiddle.net/Mc92M/1/

$(document).ready(function(){ 
    $("li.one").on("click", function() {

        $('.content').fadeOut(400);
        if ($('.content').is(':hidden')) {
            $('.content').fadeIn(500);
        } 
    });

    $('.content').hide();
});

当您使用.next()时，它定位的是第二个li，而不是内容div，因此无法显示或隐藏任何内容。我还删除了.hide和.show，因为您已经淡入/淡出

如果你真的想使用.next()那么就必须这样做

$(document).ready(function(){ 
    $(".topnav").on("click", function(e) {

        if( $(e.target).parent().is('li.one') ) {
            $(this).next().toggle();
        }
    });

    $('.content').hide();
});

ul li选择器不起作用

2 个答案:

Working DEMO