Question

下面是带有Semantic UI的侧边栏标记内的手风琴。

<!DOCTYPE 5>
<html>
  <head>
    <title>App</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  </head>
  <body>
    <div id="app">
      <div class="ui bottom attached segment">
        <div class="ui sidebar vertical left menu borderless sidemenu inverted grey"><a class="item logo"><img src="./assets/icon.png"/></a>
          <div class="ui accordion inverted"><a class="title item"><i class="home titleIcon icon"></i> Dashboard 1<i class="dropdown icon"></i></a>
            <div class="content"><a class="item" href="index.html">Dashboard v1</a></div><a class="title item"><i class="home titleIcon icon"></i> Option <i class="dropdown icon"></i></a>
            <div class="content"><a class="item" href="index.html">Dashboard v1</a></div>
          </div>
        </div>
        <div class="pusher">
          <div class="ui top attached menu"><a class="item"><i class="sidebar icon"></i></a></div>
          <div class="ui basic segment">
            <router-view></router-view>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

以下是我用来创建侧边栏和手风琴的脚本：

$('.ui.sidebar').sidebar({ context: $('.bottom.segment') }).sidebar('attach events', '.menu .item');

$('.ui.accordion')).accordion({ exclusive: false });

当我点击手风琴的第一项时：

<a class="title item"><i class="home titleIcon icon"></i> Dashboard 1<i class="dropdown icon"></i></a>

侧边栏切换到隐藏模式。我忘了添加一些东西吗？我在网上找到了一些样本和主题，没有一个有这个问题。

感谢您的帮助。

Answer 1

我建议使用onClick事件来切换侧边栏，如下所示：

$( "#toggle" ).on( "click", function() {
$('.ui.sidebar').sidebar('toggle');
});

请记住将选择器（id或class）设置为触发元素：

<a class="item" id="toggle"><i class="sidebar icon"></i></a>

[DEMO]

Accordion选项会在Semantic UI中关闭侧栏

1 个答案: