Question

任何人都可以让我知道我做错了什么。我有：

//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");
           });
    });

我的最终目标是在按下列表项时显示没有显示内容，以便它可以整齐地展开。但是，我似乎无法以任何方式出现警报（）。我应该对主列表中的所有列表项使用id，还是对类有用吗？

/ W

Answer 1

你可以添加.next函数来显示用户点击任何li curreny的下一个ul。你必须将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

Answer 2

你的代码工作正常我相信你没有在你的页面上包含Jquery - 或者它的路径无效。检查网络选项卡，看看是否收到http错误检索jquery。

您可以通过执行以下操作来显示隐藏的li：

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

您的代码运行良好：

Demo

在这种情况下，类比ids更好，因为Id必须在您的页面上是唯一的。您可以通过在外部li元素中添加一个类来使用类似于下面的类。只需将 #test 中的绑定更改为您为li元素提供的任何类。

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

Demo

Answer 3

我应该对主列表中的所有列表项使用id，还是使用类？

ID 唯一。如果您有多个相同的ID，您的JavaScript代码将无法正常工作。如果您计划在所有列表项中添加类似的属性，则在这种情况下使用类（并使用.而不是#引用它）。在这种情况下，您可以使用以下方法调用click函数：

$('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，您还将选择属于任何内部的li元素 ul）

Answer 4

您在“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>

Answer 5

它应该可以工作但是如果遇到问题，请尝试将ID属性移动到A而不是LI

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

5 个答案: