Question

我正在尝试创建一个侧面菜单栏，就像我们在使用bootstrap和jQuery的Android手机中看到的那样

我想要的是当我将鼠标悬停在我的特定元素上时，它的内部子项应该显示出来。

这就是我现在所做的

代码如下

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Newspaper</title>
<link rel="stylesheet" href="../css/bootstrap.min.css"/>
<link rel="stylesheet" href="../css/font-awesome.min.css">
<script type="text/javascript" src="../js/jquery.js"></script>


<!-- Latest compiled and minified JavaScript -->
<script src="../js/bootstrap.min.js"></script>
<style type="text/css">

    .mini-submenu{

  background:#000; 
  border: 1px solid rgba(0, 0, 0, 0.9);
  border-radius: 4px;
  padding: 9px;  
  /*position: relative;*/
  width: 42px;


}
.mini-submenu .icon-bar {
  border-radius: 1px;
  display: block;
  height: 2px;
  width: 22px;
  margin-top: 3px;
}
.mini-submenu .icon-bar {
  background-color: #fff;
}
</style>
<script>
var i=1;
$(document).ready(function(){
    $('.myicon').click(function()
    {
        if(i==1)
        {

            $('.ic').hide(200);
            $('#mylist').animate({width:"90px"},300);
            $('.myicon').removeClass('fa-rotate-90');
            $('.myicon').addClass('fa-rotate-270');
            i--;
        }
        else
        {
            $('.ic').show(200);
            $('#mylist').animate({width:"200px"},300);
            $('.myicon').removeClass('fa-rotate-270');
            $('.myicon').addClass('fa-rotate-90');
            i++;

        }
    });
 $('#mylist > a').hover(function(){

   $(this).children('div').show(1000); 



  },
  function(){



  });
});
</script>
</head>
<body>
<a href="#" data-toggle="collapse" data-target="#mylist">
<div class="mini-submenu">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
    </div>

</a>
<div class="list-group col-md-3 collapse" id="mylist">
  <a class="list-group-item home" href="#" data-toggle="collapse" data-target="#toggleDemo1"><i class="fa fa-home fa-fw"></i><span class="ic">&nbsp; Home</span><i class="fa fa-shield fa-rotate-90 myicon" style="float:right;margin-top:5px;"></i></a>
  <div class="collapse" id="toggleDemo1" style="height: 0px;">
            <ul class="nav nav-list">
              <li><a href="#" class="list-group-item ic">Submenu1.4</a></li>
              <li><a href="#" class="list-group-item ic">Submenu1.5</a></li>
              <li><a href="#" class="list-group-item ic">Submenu1.6</a></li>
            </ul>
          </div>

  <a class="list-group-item" href="#"><i class="fa fa-book fa-fw"></i><span class="ic">&nbsp; Library</span></a>

  <a class="list-group-item" href="#"><i class="fa fa-pencil fa-fw"></i><span class="ic">&nbsp; Applications</span></a>
  <a class="list-group-item" href="#"><i class="fa fa-cog fa-fw fa-spin"></i><span class="ic">&nbsp; Settings</span></a>
  <a href="#" data-toggle="collapse" data-target="#toggleDemo" class="list-group-item">
  <i class="fa fa-home fa-fw"></i><span class="ic">Submenu 1</span> 
          </a>
          <div class="collapse" id="toggleDemo" style="height: 0px;">
            <ul class="nav nav-list">
              <li><a href="#" class="list-group-item ic">Submenu1.1</a></li>
              <li><a href="#" class="list-group-item ic">Submenu1.2</a></li>
              <li><a href="#" class="list-group-item ic">Submenu1.3</a></li>
            </ul>
          </div>

</div>
</body>
</html>

这里是JSFIDDLE

中的示例

Answer 1

你可以纯粹用CSS做到这一点，方法如下：

将所有元素包裹在容器中

<div id="container">
    <a href="#" data-toggle="collapse" data-target="#mylist">
        <!-- Button UI to hover -->
    </a>
    <div class="list-group">
        <!-- List Item that will slide -->
    </div>
</div>

然后为您想要隐藏的list-group应用CSS，并从左到右显示，使用此

.list-group {
    position: absolute;
    width: 100%;
    right: 100%;    // this will make the element out of viewport in the left
    -webkit-transition: all ease-in-out 0.5s; 
    -moz-transition: all ease-in-out 0.5s;
    transition: all ease-in-out 0.5s;
}

转换用于滑动，然后在悬停时添加CSS并显示list-group

#container:hover .list-group {
    right: 0;
}

也不要忘记添加

#container {
    display: inline-block;
}

所以容器（div元素）的宽度不是它的父级的100％，而是来自它的内容，所以它不会触发按钮外的悬停和list-group

这是JSFIDDLE

上的结果

悬停时jquery侧边栏菜单问题

1 个答案: