Question

我试图在容器的上下文中打开侧边栏，并尝试遵循文档站点（https://semantic-ui.com/modules/sidebar.html#using-a-custom-context）上提供的示例代码

但是，我没有让它对我有用，因为我尝试过的所有结果都在：

侧边栏：必须添加推杆元素。为了获得最佳性能，请确保身体内容在pusher元素内
侧边栏：必须移动侧边栏。为了获得最佳性能，请确保侧边栏和推杆是直接的您的身体标签的孩子

错误。

我（简体）的html看起来像这样：

<div class="ui main fluid container">
  <div class="sidebar-container">
    <div class="ui center aligned text container">
      <button class="ui basic open search button">
      Filter Instruments
    </button>
    </div>
    <div class="sidebar-content pushable">
      <div class="ui top sidebar">
        search form
      </div>
      <div class="pusher">
        search results
      </div>
    </div>
  </div>
</div>

然后我尝试使用此js初始化侧边栏：

$(document).ready(function() {
  var widest = 0;
  $('.sidebar-container .ui.sidebar')
    .sidebar('setting', 'transition', 'push')
    .sidebar({
      context: $('.sidebar-container .sidebar-content'),
      onVisible: function() {
        $('.open.search.button').text('Close Filter');
      },
      onHide: function() {
        $('.open.search.button').text('Open Filter');
      }
    })
    .sidebar('attach events', '.sidebar-container .open.search');
})

我创建了这个小提琴https://jsfiddle.net/r72mftaq/4/

任何暗示我做错了的事情都将受到高度赞赏！

谢谢，安德烈亚斯（Andreas）

Semantic-UI-带有上下文的侧栏->必须移动侧栏

0 个答案: