jQuery .click（）.show（）函数问题

任何人都可以请让我知道我做错了什么。我：jQuery .click（）.show（）函数问题

//My HTML 
    <div> 
     <ul> 
     <li id="test"><a href="#">Main Item 1</a></li> 
      <ul class="list-in-list"> 
       <li><a href="#">Item 1</a></li> 
       <li><a href="#">Item 2</a></li> 
       <li><a href="#">Item 3</a></li> 
      </ul> 
     <li><a href="#">Main Item 2</a></li> 
     <li><a href="#">Main Item 3</a></li> 
     </ul> 
    </div> 

//My CSS 
    .list-in-list { 
    display:none; 
    } 

//My jQuery 

    $(document).ready(function() { 

     $('#test').click(function() { 
      alert("hello"); 
      }); 
    });

我的最终目标是要表明，没有任何显示的内容，如果你按一个列表项，使之整齐地扩展。但是，我似乎无法以任何方式获得alert（）。我应该为主列表中的所有列表项使用一个id还是足够用一个类？

来源

2013-03-28 XT_Nova

警报在你的代码http://jsfiddle.net/qLSrG/可以正常使用，你可能忘了将jQuery添加到您的项目。 – MyMomSaysIamSpecial 2013-03-28 10:15:52

警报必须工作，代码是好的。你有没有在你的网站中包含jQuery？ – jolt 2013-03-28 10:15:54

它工作正常。 http://jsfiddle.net/hjLJH/ – 2013-03-28 10:16:05

您可以添加。接下来函数来显示用户的任何李curreny点击下一个上行。你要ID测试更改为一个类的名称，以便在主里的所有点击效果

HTML会像

<div> 
    <ul> 
    <li class="main"><a href="#">Main Item 1</a></li> 
     <ul class="list-in-list"> 
      <li><a href="#">Item 1</a></li> 
      <li><a href="#">Item 2</a></li> 
      <li><a href="#">Item 3</a></li> 
     </ul> 
    <li class="main" ><a href="#">Main Item 2</a></li> 

     <ul class="list-in-list"> 
      <li><a href="#">Item 1</a></li> 
      <li><a href="#">Item 2</a></li> 
      <li><a href="#">Item 3</a></li> 
     </ul> 
    <li class="main"><a href="#">Main Item 3</a></li> 

     <ul class="list-in-list"> 
      <li><a href="#">Item 1</a></li> 
      <li><a href="#">Item 2</a></li> 
      <li><a href="#">Item 3</a></li> 
     </ul> 
    </ul> 
</div>

和JQuery功能低于

$(document).ready(function() { 

    $('.main').click(function() {     
     $(this).next(".list-in-list").slideToggle();    
     }); 
});

查看详细，你可以检查link

来源

2013-03-28 10:23:33

真棒，谢谢你！ – 2013-03-28 13:45:02

这不能回答你的问题。这回答了对你的问题的评论。正如你已经接受这个答案，你应该改变你的问题，以反映评论，以便使用户可以通过搜索引擎来到这里。 – 2013-03-28 16:23:13

-1

它sholud工作，但尝试的ID属性移动到A，而不是李，如果你遇到问题

来源

2013-03-28 10:16:52

你的代码工作正常，我相信你没有包含Jquery的页面上 - 或也许它的路径是无效的。检查你的网络标签，看看你是否得到一个HTTP错误检索jQuery。

您可以通过执行显示隐藏的李如下：

$(document).ready(function() { 
    $('#test').click(function(e) { 
     $(this).find('.list-in-list').show(); 
    }); 
});

你的代码工作正常：

Demo

在这种情况下，类会比IDS更好，因为标识的必须在您的网页上唯一。您可以通过向外部li元素中添加一个类来使用下面演示中的类。只要将绑定从＃测试更改为你给你的元素的任何类。

$('.clickAbleLi').click(function(e) { 
    $(this).find('.list-in-list').show(); 
});

Demo

来源

2013-03-28 10:22:22

我应该用所有的列表项的ID在主列表，或者是它足以与一类？

ID是唯一。如果您有多个相同的ID，您的JavaScript代码将无法正常工作。如果您打算为所有列表项添加类似的属性，则在此情况下使用类（并使用.而不是#来引用它）。在这种情况下，你会打电话点击功能使用：

$('li.myClass').click(...);

如果你只有一个列表，但是，您可以将ID简单地添加到ul和使用点击功能：

$('ul#myId > li').click(...);

请注意，在这种情况下，类会稍微快一些。

你会再引用您的使用内ul：

$('li.myClass > ul.list-in-list');

，或者根据其上面你去用：

$('ul#myId > li > ul.list-in-list');

（你会使用>这里只选择直接的孩子。如果您使用ul#myId li也将会是选择属于任何内ul的li元素）

来源

2013-03-28 10:22:42

您在“list-in-list”之前关闭您的</li>标记。您的内部列表后应关闭</li>标签;）就像这样：

<div> 
    <ul> 
    <li id="test"><a href="#">Main Item 1</a> 
     <ul class="list-in-list"> 
      <li><a href="#">Item 1</a></li> 
      <li><a href="#">Item 2</a></li> 
      <li><a href="#">Item 3</a></li> 
     </ul> 
    </li> 
    <li><a href="#">Main Item 2</a></li> 
    <li><a href="#">Main Item 3</a></li> 
    </ul> 
</div>

来源

2013-03-28 10:25:58 Djouuuuh

jQuery .click（）.show（）函数问题

回答

相关问题