javascript - 将按钮附加到语义 ui 侧边栏

Question

我正在尝试制作一个像 semantic-ui.com 上那样的简单侧边栏，只是我希望它位于右侧。看起来很简单，除了让按钮附加是我最大的问题。你可以在 jsfiddle 看到它，有点工作...... HTML:

<div class="ui page grid">
    <div class="ui column segment">
        <div class="ui thin vertical inverted labeled icon right overlay sidebar menu">abc</div>
        <div class="ui black huge launch left attached button" style="display:absolute;right:0px;width:70px;">
            <span class="text" style="display:none;">Sidebar</span>
            <i class="icon list layout"></i>
        </div>
    </div>
</div>

JS:

$(".launch.button").mouseenter(function(){
        $(this).stop().animate({width: '215px'}, 300, 
             function(){$(this).find('.text').show();});
    }).mouseleave(function (event){
        $(this).find('.text').hide();
        $(this).stop().animate({width: '70px'}, 300);
    });
$(".ui.overlay.sidebar").sidebar({overlay: true})
                .sidebar('attach events','.ui.launch.button');

http://jsfiddle.net/6Ltv4/

Answer 1

我知道这是遥远的 future ，但我仍然对此有疑问，修复方法很简单，希望对您有所帮助。

您只需创建一个按钮元素并将其放在侧边栏和推送器元素之间，然后分配正确的 css 类

<div class="ui sidebar"></div>

<button class="ui black big right attached fixed button">
My Button attached to sidebar</button>

<div class="pusher"></div>

然后该按钮将附加到页面左侧的侧边栏并与其一起流动。