Question

我正在处理一个包含Bootstrap垂直菜单（包含手风琴）的脚本。手风琴是通过MySQL调用填充的，可以返回任意数量的行。

我正在另一个DIV上进行此工作，该DIV不在垂直菜单和手风琴中。

当我打开手风琴时，将显示行，但是我需要能够滚动视图列表。我正在尝试使用“ niceScroll”插件但列表不会滚动。

垂直菜单和手风琴代码

<div id="Rooms1">
  <div class="ui-accordion-header" id="rooms">
    <div class="vertical-menu" id="headingRooms">
      <div  data-toggle="collapse" data-target="#collapseRooms"><a href="#">Rooms <span class="glyphicon glyphicon-chevron-down"></span></a></div>
    </div>
      <div id="collapseRooms" class="collapse" aria-labelledby="headingRooms" data-parent="#conf-accordion">
    <div id="AllRoomStatus">
      <div id="AllBoxScrollRoomStatus">
        <?php do { ?>
          <div class="room-list-background">
            <div  data-target="#add_data_modal" class="RoomID" data-toggle="modal" data-backdrop="static" data-keyboard="false"  id="RoomID=<?php print $row_AvailSyn5['ConfRoomID']; ?>" target="_self"> <?php print $row_AvailSyn5['ConfRoomName']; ?></div>
          </div>
        <?php } while ($row_AvailSyn5 = mysql_fetch_assoc($AvailSyn5)); ?>
      </div>
    </div>
   </div>
  </div>
</div>

CSS

 #AllRoomStatus {
overflow: hidden;
margin-left: 1px;
height: 150px;
background-color: #F1F3F8;
margin-right: 1px;
padding-left: 1px;
width: 175px;
max-width: 175px;
min-width: 175px;
border: 1px solid #CCC;
}
 #AllBoxScrollRoomStatus {
height: auto;
width: 100%;
overflow: auto;
margin-right: 0px;
margin-left: 0px;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
}

JavaScript

$("#AllRoomStatus").niceScroll("#AllBoxScrollRoomStatus",{
  cursorcolor:"#0F0",
  cursoropacitymax:0.7,
  boxzoom:true,
  touchbehavior:true,
  cursorcolor: "#000000", // change cursor color in hex
  cursoropacitymin: 0, // change opacity when cursor is inactive (scrollabar "hidden" state), range from 1 to 0
  cursoropacitymax: 1, // change opacity when cursor is active (scrollabar "visible" state), range from 1 to 0
  cursorwidth: "1px", // cursor width in pixel (you can also write "5px")
  cursorborder: "0px",
  autohidemode: "scroll",
  disableoutline: true // css definition for cursor border
});

谁能看到我要去哪里哪里

在您的时间里提前多谢。

滚动Bootstrap垂直菜单和Accordian的内容

0 个答案: