Question

如果使用智能手机浏览器访问我的网站上的引导程序下拉菜单，我会遇到问题。我正在寻找一些解决方案，只有此解决方案有效Click here。实际上，此解决方案解决了我的问题，标题中的菜单可以在手机上轻松访问。但是，如果在同一页面中有一些带有下拉选项的值数据（要在每行数据中显示可编辑的功能，如编辑，删除，查看数据），则网站的显示将始终排在最前面。因此，如果用户要编辑/删除/查看数据，这会给用户带来不舒适感，那么网站的显示通常会回到顶部。我认为如果页面上有很多数据（总是单击一个选项，从上到下滚动显示），将是一个问题。也许有人可以解决这个问题？

我的观看次数

<link href="../css/bootstrap.min.css" rel="stylesheet">
        <script src="../js/bootstrap.min.js"></script>
        <script>
            $(function() {
              return $("a.dropdown-toggle:not(.multiselect)").click(function(e) {
                $("ul.dropdown-menu:not(.multiselect-container)").css("display", "none");
                $(this).next("ul.dropdown-menu").css("display", "block");
                return e.stopPropagation();
              });
            });
    
            $(document).on('click click.dropdown.data-api', function(e) {
              if (!$(e.target).closest('.dropdown, .multiselect-container').length) {
                return $("ul.dropdown-menu:not(.multiselect-container)").css("display", "none");
              }
            });
        </script>
                    
      <body>
        <div class="navbar navbar-inverse navbar-fixed-top">
          <div class="navbar-inner">
            <div class="container">
              <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
              </a>
              <div class="nav-collapse collapse"> 
                <ul class="nav">
                  <li class="active"><a href="#"><i class="icon-home icon-white"></i> Tab A</a></li> 
                 <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="icon-folder-close icon-white"></i> Tab B<b class="caret"></b></a>
                    <ul class="dropdown-menu">
                      <li><a href="#"><i class="icon-tasks"></i> A</a></li>
                      <li><a href="#"><i class="icon-tasks"></i> B</a></li>
                      <li><a href="#"><i class="icon-tasks"></i> C</a></li>
                      <li><a href="#"><i class="icon-tasks"></i> D</a></li>
                    </ul>
                  </li>
                </ul>
               </div><!--/.nav-collapse -->
             </div>
          </div>
        </div>  
      <div class="well">
  <table class="table table-hover table-condensed">
    <thead>
      <tr>
        <th>No.</th>
        <th width='75px'>Stuf</th>
        <th width='75px'>Name</th>
        <th>Profile</th>
        <th>Action</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td><small><?php echo $no; ?></td>
        <td><small><?php echo $stuf; ?></td>
        <td><small><?php echo $name; ?></td>
        <td><small><?php echo $profile; ?></td>
        <td>
            <div class="btn-group">
              <a class="btn btn-small small-box" href="#"><i class="icon-pencil"></i></a>
              <a class="btn btn-small dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
              <ul class="dropdown-menu">
                <li><a href="#" class="small-box"><i class="icon-leaf"></i> View</a></li>
                <li><a href="#" onClick="return confirm('Are you sure DELETE this Data..???');"><i class="icon-trash"></i> Delete</a></li>
              </ul>
            </div><!-- /btn-group -->
        </td>
</div>
</body>

移动浏览器上的Bootstrap下拉问题

0 个答案: