0

谁能让我知道我做错了什么。我有：

//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，还是一个类就足够了？

/W

4

5 回答 5

2

您可以添加 .next 函数以显示用户点击任何 li curreny 的下一个 ul。您必须将 id test 更改为一个类名才能在 main li 的所有单击中生效

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();             
       });
});

有关详细信息，您可以查看链接

于 2013-03-28T10:23:33.867 回答
1

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

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

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

您的代码工作正常：

演示

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

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

演示

于 2013-03-28T10:22:22.220 回答
1

我应该为主列表中的所有列表项使用一个 id，还是一个类就足够了？

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

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

但是，如果您只有一个列表，您可以简单地将 ID 添加到ul并使用 click 函数：

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

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

然后，您将使用以下方法引用您的内部 ul：

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

或者，取决于您使用上述哪一项：

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

（您将>在此处仅选择直接子级。如果您使用过ul#myId li，您还将选择li属于任何inner ul的元素）

于 2013-03-28T10:22:42.863 回答
0

</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-28T10:25:58.440 回答
-1

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

于 2013-03-28T10:16:52.547 回答