Ember cli 切换侧边栏“实现 Jquery 部分?”

Ember cli toggle sidebar "implementing the Jquery part?"

本文关键字：Jquery 部分 实现 cli 侧边栏 Ember      更新时间：2023-09-26

我正在尝试在我的余烬应用程序中实现一个小的切换站点栏。引导部分易于实现。但是我不知道如何将javascript部分实现到视图中。

我想在应用中使用的侧边栏：http://bootsnipp.com/snippets/featured/nav-sidebar-with-toggle-button

有人可以告诉我如何修复jQuery部分吗？（侧边栏处于活动状态，但在访问网站时必须处于非活动状态。站点栏必须在用户单击选项按钮的那一刻弹出打开）。

import Ember from 'ember';
export default Ember.View.extend({
$(function(){
	$('#slide-submenu').on('click',function() {			        
        $(this).closest('.list-group').fadeOut('slide',function(){
        	$('.mini-submenu').fadeIn();	
        });
        
      });
	$('.mini-submenu').on('click',function(){		
        $(this).next('.list-group').toggle('slide');
        $('.mini-submenu').hide();
	})
})
  });
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
		<div class="col-sm-4 col-md-3 sidebar">
    <div class="mini-submenu">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
    </div>
    <div class="list-group">
        <span href="#" class="list-group-item active">
            Submenu
            <span class="pull-right" id="slide-submenu">
                <i class="fa fa-times"></i>
            </span>
        </span>
        <a href="#" class="list-group-item">
            <i class="fa fa-comment-o"></i> Lorem ipsum
        </a>
        <a href="#" class="list-group-item">
            <i class="fa fa-search"></i> Lorem ipsum
        </a>
        <a href="#" class="list-group-item">
            <i class="fa fa-user"></i> Lorem ipsum
        </a>
        <a href="#" class="list-group-item">
            <i class="fa fa-folder-open-o"></i> Lorem ipsum <span class="badge">14</span>
        </a>
        <a href="#" class="list-group-item">
            <i class="fa fa-bar-chart-o"></i> Lorem ipsumr <span class="badge">14</span>
        </a>
        <a href="#" class="list-group-item">
            <i class="fa fa-envelope"></i> Lorem ipsum
        </a>
    </div>        
</div>

在视图中实现 JS 时，您希望将代码放在 didInsertElement 钩子中：

import Ember from 'ember';
export default Ember.View.extend({
    didInsertElement: function() {
        // Your code here
    }
});

有关工作示例，请参阅此jsbin：http://emberjs.jsbin.com/qegedehovo/1/edit?html,css,js,output

您在代码段中没有的 jsbin 中的内容：

  • 字体真棒图标
  • CSS取自您提供的链接，该链接为迷你子菜单设置样式
相关文章：