觸發時如何使語義UI邊欄不暗淡頁面內容？

Question

觸發語義UI側欄時，如何使推送程序不暗淡？

我按如下方式嘗試了語義UI側欄：

 $(document).ready( function() { $('.button').click( function() { $('.ui.sidebar') .sidebar('toggle'); } ) }); 

 <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"></script> <button class="ui button">trigger</button> <div class="ui right demo sidebar vertical inverted menu push visible" style=""> <a class="header item">File Permissions</a> <a class="item">Share on Social</a> <a class="item">Share by E-mail</a> <a class="item">Edit Permissions</a> <a class="item">Delete Permanently</a> </div> 

邊欄被觸發時，推送內容不應該變暗。

Answer 1

您可以使用dimPage設置控制邊欄的調光行為。 您可以按以下方式防止變暗：

$('.ui.sidebar').sidebar('setting', 'dimPage', false);

這是一個示例片段：

 $(document).ready(() => { $('.ui.sidebar').sidebar('setting', 'dimPage', false); $('#hamburger').click(() => { $('.ui.sidebar').sidebar('toggle'); }); }); 

 <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"></script> <div class="ui sidebar inverted vertical menu"> <a class="item" href="#">Item 1</a> <a class="item" href="#">Item 2</a> </div> <div class="pusher"> <div class="ui container"> <button class="ui button" id="hamburger"> <i class="sidebar icon"></i> </button> <p>Some content</p> </div> </div>