在行文本中，菜单只有幻灯片按钮

Question

我有一个：http://jsfiddle.net/QDUQk/1621/

*点击“菜单”以切换幻灯片。代码在这篇文章的底部。

我怎样才能使“菜单”不消失，而是使“内部菜单”在不移动“菜单”位置的情况下向左滑动(“菜单”将位于屏幕的最右侧，“内菜单”将滑到“菜单”的左边，而不移动“菜单”的位置)。

因此，点击“菜单”就会留下“内部菜单◀菜单”&再次单击“菜单”会让你回到正在显示的“菜单”。

此外，我如何才能使它，以使点击“内部菜单”不会刺激它滑走？

谢谢!

CSS

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

HTML

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

JS

$('#cat_icon,.panel_title').click(function () {
    if($('#cat_icon').is(':visible')){
    $('#cat_icon').fadeOut(function () {
        $('#categories').toggle('slide', {
            direction: 'right'
        }, 1000);
    });
    }
    else{
        $('#categories').toggle('slide', {
            direction: 'right'
        }, 1000, function(){ $('#cat_icon').fadeIn();});
    }
});

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

这里有一个片段：

​

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

#container
{
    float: right;
    /* to avoid the "Full page" div in the snippet iframe*/
    margin-top: 50px;
}
#cat_icon
{
    background-color: white;
}
#cat_icon, #categories
{
    position: absolute;
    right: 0px;
    line-height: 1.5em;
}
#categories {
    margin-right: 40px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script><script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>

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

​

为了避免重叠，您可以在#cat_icon元素中放置一个白色背景。

此外，由于#cat_icon和#categories符号的存在，◀和◀元素都不能正确地进行会聚。您可以强制line-height避免它。

希望能帮上忙！

Answer 3

我想这涵盖了你想要的一切：http://jsfiddle.net/QDUQk/1627/

为了确保单击内部菜单不会忽略它，您需要从.click()处理程序中删除“.click”，如下所示：

$('#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;
}