Question

我有一个左侧带有徽标的菜单和右侧菜单的图标。当我点击图标时，菜单从窗口右侧滑入，再次单击该图标时熄灭。我遇到的问题是

1）当徽标放在图标下方时，侧栏不会滑动（当徽标放在图标上方时，它会工作。）

2）我希望侧栏从图标底部滑动，而不是从图标右侧滑动。

我正在使用Bootstrap 3

代码：HTML

<div id="wrapper" class="toggled">
    <div id="sidebar-wrapper">
        <ul class="sidebar-nav">
            <li class="sidebar-brand"><a href="#">eKincare Menu</a></li>
            <li style="color:white;">Menu Item</li>
            <li style="color:white;">Menu Item</li>
            <li style="color:white;">Menu Item</li>
            <li style="color:white;">Menu Item</li>
            <li style="color:white;">Menu Item</li>
        </ul>
    </div>
    <div id="page-content-wrapper" style="margin:0;">
        <div class="container-fluid" style="padding:0;">
            <nav class="navbar navbar-default" role="navigation" style=";background-color:#00bcd3; !important">
                <div class="container-fluid">
                    <ul class="nav navbar-nav navbar-right" style="color:white;">
                        <!-- <li><img src="logo.png" alt="eKincare Logo" style="padding-top:5px;"></li> -->
                        <li>
                            <a href="#menu-toggle" id="menu-toggle">
                                <i class="icon icon-menu pull-right">
                                    <img src="https://cdn1.iconfinder.com/data/icons/android-user-interface-vol-1/16/38_-_menu_bar_lines_option_list_hamburger_web-128.png" width=50 height=30 style="padding-left:5px;">
                                </i>
                            </a>
                        </li>
                       <li><img src="logo.png" alt="Logo"></li>
                    </ul>
                </div>
            </nav>
        </div>
    </div>
</div>

代码CSS

#wrapper {
    display:block;
    padding-right: 250px;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}
#sidebar-wrapper {
    z-index: 1000;
    position: fixed;
    right: 250px;
    height: 100%;
    margin-right: -250px;
    overflow-x: hidden;
    background: #000;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}
#sidebar-wrapper {
    width: 250px;
}
#page-content-wrapper {
    z-index:10;
    width: 100%;
    position: absolute;
    margin-left: -250px;
}
  /* Sidebar Styles */
.sidebar-nav {
    position: absolute;
    top: 0;
    width: 250px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.sidebar-nav li {
    text-indent: 20px;
    line-height: 40px;
    padding-right: 17%;
}
.sidebar-nav li a {
    display: block;
    text-decoration: none;
    color: #999999;
}
#wrapper.toggled {
    padding-right: 0;
}  
#wrapper.toggled #sidebar-wrapper {
    width: 0;
}
#page-content-wrapper {
    position: relative;
}
#wrapper.toggled #page-content-wrapper {
    position: relative;
}

Code JS

  $(document).ready(function(){
    $("#menu-toggle").click(function (e) {
      e.preventDefault();
      $("#wrapper").toggleClass("toggled");
    });
  });

在代码中，注释＆＃34; list-item（li）＆＃34;是在菜单图标之前（上方）放置的徽标图像。（相同的＆＃34;列表项＆＃34;放在菜单图标后面，没有注释）。我想让幻灯片工作当徽标图像放在代码中的菜单图标上方时。

链接：http://jsbin.com/wenexihuwo/edit?html,output

滑杆工作。这是我的错误。

我们如何从下方滑动菜单栏，而不是在移动版本中滑动（如普通的bootstrap导航栏）。

Answer 1

此代码适用于此处，我们没有将image logo.png提供给＆＃34;请参阅＆＃34;在页面上，也许你的图像阻挡了点击区域，以便更好地测试图像。

发出警告（＆＃39; hi＆＃39;）;在功能上查看点击是否有效，只有幻灯片被破坏......

抱歉我的英语不好。

Answer 2

问题在于您所设计的结构。不是李

工作代码。

删除了li，因为它的宽度为li而a为100％

HTML

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>

</head>
<body>
<div id="wrapper" class="toggled">
    <div id="sidebar-wrapper">
        <ul class="sidebar-nav">
            <li class="sidebar-brand"><a href="#">eKincare Menu</a></li>
            <li style="color:white;">Menu Item</li>
            <li style="color:white;">Menu Item</li>
            <li style="color:white;">Menu Item</li>
            <li style="color:white;">Menu Item</li>
            <li style="color:white;">Menu Item</li>
        </ul>
    </div>
    <div id="page-content-wrapper" style="margin:0;">
        <div class="container-fluid" style="padding:0;">
            <nav class="navbar navbar-default" role="navigation" style=";background-color:#00bcd3; !important">
                <div class="container-fluid">
                    <ul class="nav navbar-nav navbar-right" style="color:white;">
                        <!-- <li><img src="logo.png" alt="Logo" style="padding-top:5px;"></li> -->



                       <li> <a href="#menu-toggle" id="menu-toggle" style="width:100px;float:right">
                                <i class="icon icon-menu pull-right">
                                    <img src="https://cdn1.iconfinder.com/data/icons/android-user-interface-vol-1/16/38_-_menu_bar_lines_option_list_hamburger_web-128.png" width=50 height=30 style="padding-left:5px;">
                                </i>
                            </a><img src="logo.png" alt="Logo" style="padding-top:5px;"></li> 
                    </ul>
                </div>
            </nav>
        </div>
    </div>
</div>
</body>
</html>

Answer 3

通过单击#menutoggle元素上方的工作，检查img元素定位。

侧栏不能单击

3 个答案:

HTML