Html 仅使用css而非javascript在单击时进行ul li拖放_Html_Css

Html 仅使用css而非javascript在单击时进行ul li拖放

html css

Html 仅使用css而非javascript在单击时进行ul li拖放,html,css,Html,Css,嗨，朋友们，我想制作一个侧菜单，现在我有了一个（使用html列表构建）。但问题是我不知道如何制作子类别（子列表）我已经把我的代码放在这里了。我想在单击子类别时将其下拉类别食品玩具礼品果实小玩意玩具行李花电子学运动您可以这样堆叠它们： <ul> <li>myItem 1</li> <li>myItem 2</li> <li> &

嗨，朋友们，我想制作一个侧菜单，现在我有了一个（使用html列表构建）。但问题是我不知道如何制作子类别（子列表）我已经把我的代码放在这里了。我想在单击子类别时将其下拉


类别

食品

玩具


礼品

果实

小玩意
玩具
行李
花
电子学
运动

您可以这样堆叠它们：

  <ul>
      <li>myItem 1</li>
      <li>myItem 2</li>
      <li>
         <ul>
           <li>myItem 2a</li>
        </ul>
     </li>
     <li>myItem 3</li>
     <li>myItem 4</li>
</ul>


我的项目1
我的项目2


我的项目2a


我的项目3
我的项目4

或者，您可能希望通过将

和

标签。

试试这个：

<html lang="en">
  <head>
    <meta charset="utf-8">
        <title></title>
        <style type="text/css">
          .droplist li ul{
            display: none;
          }
        </style>
  </head>
  <body>
    <ul class="droplist">
      <li><a href="#">Category</a>
          <ul>
            <li><a href="#"><i class="fa fa-angle-right"></i> FOOD ITEMS</a></li>
            <li><a href="#"><i class="fa fa-angle-right"></i> TOYS</a></li>
            <li><a href="#"><i class="fa fa-angle-right"></i> GIFTS </a></li>
            <li><a href="#"><i class="fa fa-angle-right"></i>Fruits</a></li>
          </ul>
      </li>

    </ul>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
      <script>
      $(document).ready(function(){
          $(".droplist li").click(function(){
              $(".droplist li ul").toggle();
          });
      });
      </script>
  </body>
</html>


李先生{
显示：无；
}










$（文档）.ready（函数（）{
$（“.droplist li”）。单击（函数（）{
$（“.droplist li ul”）.toggle（）；
});
});

对于多个液滴列表，请尝试以下操作：

<html lang="en">
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <div id="dropdown-1" class="dropdown dropdown-processed">
      <a class="dropdown-link" href="#">Options</a>
      <div class="dropdown-container" style="display: none;">
        <ul>
          <li>Item 1</li>
          <li>Item 2</li>
          <li>Item 3</li>
        </ul>
      </div>
    </div>

    <div id="dropdown-2" class="dropdown dropdown-processed">
      <a class="dropdown-link" href="#">Options</a>
      <div class="dropdown-container" style="display: none;">
        <ul>
          <li>Item 1</li>
          <li>Item 2</li>
          <li>Item 3</li>
        </ul>
      </div>
    </div>

    <div id="dropdown-3" class="dropdown dropdown-processed">
      <a class="dropdown-link" href="#">Options</a>
      <div class="dropdown-container" style="display: none;">
        <ul>
          <li>Item 1</li>
          <li>Item 2</li>
          <li>Item 3</li>
        </ul>
      </div>
    </div>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script>
      $(document).ready(function(){

        $('div.dropdown').each(function() {
          var $dropdown = $(this);

          $("a.dropdown-link", $dropdown).click(function(e) {
            e.preventDefault();
            $div = $("div.dropdown-container", $dropdown);
            $div.toggle();
            $("div.dropdown-container").not($div).hide();
            return false;
          });

        });

        $('html').click(function(){
          $("div.dropdown-container").hide();
        });

      });
      </script>
  </body>
</html>



项目1
项目2
项目3


项目1
项目2
项目3


项目1
项目2
项目3

$（文档）.ready（函数（）{
$（'div.dropdown'）。每个（函数（）{
var$下拉列表=$（此）；
$（“a.dropdown-link，$dropdown）。单击（函数（e）{
e、 预防默认值（）；
$div=$（$div.dropdown-container，$dropdown）；
$div.toggle（）；
$（$div.dropdown-container”）.not（$div.hide（）；
返回false；
});
});
$（'html'）。单击（函数（）{
$（“div.dropdown-container”）.hide（）；
});
});

“点击”需要javascript而不是CSScan，可以用鼠标悬停来完成吗？是的，可以……我建议你做更多的研究。在线上有数百个关于悬停CSS菜单的教程。你可以使用“复选框技巧”或使用

：target

选择器。是的，这一个有效。但是有没有办法创建多个下拉列表。我的意思是，当我尝试打开一个时，其他列表也会打开