Question

*点击＆＃34;菜单＆＃34;切换幻灯片。代码位于这篇文章的底部。

我怎样才能这样做＆＃34;菜单＆＃34;不会消失，而是＆＃34;内部菜单＆＃34;滑动到它的左侧而不移动＆＃34;菜单＆＃34;的位置。（＆＃34;菜单＆＃34;将位于屏幕的最右侧，＆＃34;内部菜单＆＃34;将滑出＆＃34;菜单＆＃34的左侧;不移动位置＆＃34;菜单＆＃34;。）

因此点击＆＃34;菜单＆＃34;离开你＆＃34;内部菜单◀菜单＆＃34; ＆安培;再次点击＆＃34;菜单＆＃34;让你回到＆＃34;菜单＆＃34;正在展示。

另外，我怎样才能点击＆＃34;内部菜单＆＃34;不会引起它滑落吗？

谢谢！

CSS

@Html.TextBoxFor(m => m.SomeValue, new { @class = "someClass" }, <Your bool value>)

HTML

#categories {
    display: none;
    border : none;
    width: 100px;
    right: 0px;
}

JS

<div id="cat_icon">Menu</div>
<div id="categories">
    <div CLASS="panel_title">Inner Menu◀</div>
    </div>
</div>

Answer 1

简化你的JS

$('#cat_icon').click(function () {
  $('#categories').toggle('slide', {
      direction: 'right'
  }, 1000);
});

并将CSS更改为

#cat_icon {
  float: right;
}
#categories {
  float: right;
  display: none;
  border : none;
  width: 100px;
  right: 0px;
}

http://jsfiddle.net/zqnL6aqg/2/

Answer 2

我认为这涵盖了您要求的一切： http://jsfiddle.net/QDUQk/1627/

要确保单击内部菜单不会将其关闭，您需要从.click（）处理程序中删除“.panel_title”，如下所示：

$('#cat_icon').click(function () {
    if($('#cat_icon').is(':visible')){

        $('#categories').toggle('slide', {
            direction: 'right'
        }, 1000);

    }
    else{
        $('#categories').toggle('slide', {
            direction: 'right'
        }, 1000, function(){ $('#cat_icon').fadeIn();});
    }
});

其他修正包括定位元素......并为父母提供可以相对于其定位的内容。

<div id="container">
    <div id="cat_icon">Menu◀</div>
    <div id="categories">
        <div CLASS="panel_title">Inner Menu◀</div>
    </div>
<div>

和CSS一样：

#container {
    position: relative;
}
#cat_icon {
    position: fixed;
    top: 0px;
    right: 0px;
}
#categories {
    position: fixed;
    top: 0px;
    right: 50px;
    display: none;
    border : none;
    width: 100px;
}

仅在行文本中滑动切换菜单

2 个答案: