gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-29 10:44:42 27 4
gpt4 key购买 nike

我正在尝试制作一个像 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/

最佳答案

我知道这是遥远的 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>

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

关于javascript - 将按钮附加到语义 ui 侧边栏,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21910566/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com