Question

我是一名JavaScript初学者，试图解决3个问题：

1。。单击父级<li>时，不会出现正确的子级内容。注意，对于每个<li>类别，即“颜色，形状，大小”，都有一个适当的组成子类别。即“绿色，圆形，大”；但是，单击<li>时，“大”字样会显示为每个标签的内容。单击给定的<li>后如何显示相应的内容？

2。。我的当前代码仅在第二次点击给定的<li>时才会关闭上一次点击的内容。我不仅要在第二次单击时关闭li的显示，还要在单击另一个<li>时关闭li的显示，同时显示新单击的li的内容。

3。。我正在尝试将内容从<ul>后面平滑地过渡（滑动）。我尝试使用“ transition”属性来执行此操作，但无济于事；单击<li>元素后，才出现，但我希望它滑出。

JS小提琴：https://jsfiddle.net/6sapmodc/2/

HTML

<blue>
  <ul>
    <li>Colors
      <sub>Green</sub>
    </li>
    <li>Shapes
      <sub>Circle</sub>
    </li>
    <li>Sizes
      <sub>Large</sub>
    </li>
  </ul>
</blue>

CSS

blue {
    float: left;
    background-color: orange;
    height: 80px;
    position: absolute;
    z-index: initial;
}

blue ul {
    list-style: none;
    background-color: gray;
    position: absolute;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5;
}

blue ul li {
    height: 60px;
    width: 60px;
    background-color: red;
    text-align: center;
    line-height: 60px;
}

blue ul li:hover {
    cursor: pointer;
}

blue ul li sub {
    position: absolute;
    background-color: pink;
    width: 300px;
    height: 50px;
    z-index: -4;
    top: 0;
    display: none;
}

jQuery

$(document).ready(function()
{
    $("li").click(function()
    {
        $("sub").toggle();
    });
});

Answer 1

1）为此，您必须使用$(this)来引用单击的<li>元素，然后使用find("sub")获得正确的{{1} }孩子。

2）和3）即将检测到当前可见的元素，将其与滑出，然后显示点击的相关toggle("slide") 元素。

您可以查看下一个示例：

<li>

$(document).ready(function()
{
   $("li").click(function()
   {
       var clickedSub = $(this).find("sub");

       // If there are no visible sub elements,
       // then just show the clicked one.
       
       if ($("sub:visible").length == 0 || clickedSub.is(":visible"))
       {
           clickedSub.toggle("slide");
           return;
       }
       
       // Otherwise, first hide the current visible element,
       // and then show the sub of the clicked element.
       
       $("sub:visible").toggle("slide").queue(function()
       {
           clickedSub.toggle("slide");
           $(this).dequeue();
       });
   });
 
});

blue {
    float: left;
    background-color: orange;
    height: 80px;
    position: absolute;
    z-index: initial;
}
blue ul {
    list-style: none;
    background-color: gray;
    position: absolute;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5;
}
blue ul li {
    height: 60px;
    width: 60px;
    background-color: red;
    text-align: center;
    line-height: 60px;
}
blue ul li:hover {
    cursor: pointer;
}
blue ul li sub {
    position: absolute;
    background-color: pink;
    width: 300px;
    height: 50px;
    z-index: -4;
    left: 180px;
    top: 0;
    display: none;
}

用jQuery操作导航菜单

1 个答案: