Question

小提琴（与帖子底部的片段一起）：http://jsfiddle.net/6pp0Lg6v/8/

在iOS上，您可以拖动以显示顶部的菜单以查看通知。你也可以在Android上做同样的事情。

我正在开发一个网页设计师，我将使用这种类型的效果，我一直在尝试在jQuery中执行此操作，并且很难让它只更改元素的大小（那是.reveal）。

$('strong').click(function() {
  $('.reveal').animate({ 'height': 'toggle' }, 100)
});

// Handles FunctionBar
$(".functionbar").draggable({
  axis: "y",
  handle: ".handlesbar",
  disabled: false
});

$(".revealbar").draggable({
  axis: "y",
  //containment: "parent",
  helper: "clone",
  drag: function (event, ui) { 
    var height = ui.offset.top; 
    $(this).prev().height(height); 
    $(".revealbar.ui-draggable-dragging").addClass("hide").css({
      "height": "0",
      "overflow": "hidden"
    });
  }
});

body {
  background:  #aaa;
}

/* FunctionBar */
.functionbar {
  overflow: hidden;
}

.handlesbar {
  margin: auto;
  width: 90%;
  padding: 6px 0;
  border-radius: 10px 10px 0 0;
  font: 24px arial;
  text-align: center;
  background: hsla(180, 0%, 0%, .75);
  word-spacing: 12px;
}

a {
  text-decoration: none;
  color: hsl(180, 0%, 90%);
}

.active {
  color: #9cf;
}

.hide {
  display: none;
}

/* Drag to Reveal Elements */
.reveal {
  margin: auto;
  width: 90%;
  background: #fff;
  overflow: visible!important;
  display:none;
}
.reveal, .revealcontent {
  z-index: 0;
  overflow: auto;
}
.revealbar {
  cursor: default;
  text-align: center;
  background: #666;
  color: #1c1c1c;
  z-index: 1;
  overflow: hidden;
}
.reveal h1 {
  margin: 0;
  padding: 16px 0;
}

<!DOCTYPE html>
<html>
  <head>
    <title>Android Style Drag Menu Reveal/Hide</title>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=9" />
    <link type="text/css" rel="stylesheet" href="http://necolas.github.io/normalize.css/3.0.1/normalize.css"/>
    <link type="text/css" rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.css"/>
    <link type="text/css" rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/smoothness/jquery-ui.css" />
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
  </head>
  <body>
    <!-- FunctionBar -->
    <div class="functionbar">
      <div class="handlesbar">
        <div class="handlesbar-page1">
          <a id="addelement" title="Add Element" href="javascript:void(0)">
            <span class="fa fa-plus"></span>
          </a> 
          <a id="styleelement" title="Style Element" href="javascript:void(0)">
            <span class="fa fa-magic"></span>
          </a> 
          <a id="moresettings" title="More Settings" href="javascript:void(0)">
            <strong>...</strong>
          </a>
        </div>
      </div>

      <div class="reveal">
        <div class="revealcontent">
          <div class="stylescontent">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
          </div>
        </div>
        <div class="revealbar">
          <span class="fa fa-bars"></span>
        </div>
      </div>
    </div>
  </body>
</html>

Answer 1

删除＆＃34;收容＆＃34; PARAM：

$(".revealbar").draggable({
axis: "y",
//containment: "parent",
helper: "clone",
drag: function (event, ui) { 
    var height = ui.offset.top; 
    $(this).prev().height(height); 
    $(".revealbar.ui-draggable-dragging").addClass("hide").css({
        "height": "0",
        "overflow": "hidden"
    });
}
});

FIDDLE

Answer 2

请尝试在css中添加以下代码。

/* Drag to Reveal Elements */
.reveal {
margin: auto;
width: 90%;
background: #fff;
overflow: visible!important;
display:none;
}

以及js文件中的以下脚本

$('strong').click(function() {
    $('.reveal').animate({ 'height': 'toggle' }, 100)
});

更新了jsFiddle链接http://jsfiddle.net/6pp0Lg6v/3/

Android风格拖动可调整大小菜单

2 个答案: