Question

我尝试制作一个简单的菜单切换按钮，但切换功能没有达到预期的效果。

我想在单击按钮时运行第一个功能（隐藏侧边栏，使导航栏更长并更改图标），当我再次单击时执行相反操作。

我做错了什么？

＆＃13;

$(document).ready(function() {
  $('#menuToggler').toggle(function() {
    $('#sidebar').css('display', 'none');
    $('#top-menu').css('left', '0');
    $('.content-wrapper').css('width', '100%');
    $('.content-wrapper').css('margin-left', '0');
    $('#navbar-icon').removeClass().addClass('fa fa-bars');
  }, function() {
    $('#sidebar').css('display', 'block');
    $('#top-menu').css('left', '224px');
    $('.content-wrapper').css('width', 'calc(100% - 225px)');
    $('.content-wrapper').css('margin-left', '225');
    $('#navbar-icon').removeClass().addClass('fa fa-arrow-left');
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<nav id="top-menu" class="navbar bg-primary-gradient col-lg-12 col-12 p-0 fixed-top navbar-inverse d-flex flex-row" style="left: 224px;">


  <div class="navbar-menu-wrapper d-flex align-items-center">
    <button id="menuToggler" class="navbar-toggler navbar-toggler hidden-md-down align-self-center mr-3" type="button" data-toggle="minimize" style="display: none;">
            <span id="navbar-icon" class="fa fa-arrow-left">Toggler</span>
        </button>


  </div>
</nav>

<nav class="bg-white sidebar sidebar-fixed sidebar-offcanvas" id="sidebar" style="display: block;">
    <div class="user-info">
        <span class="online"></span>
        <a class="logout" onclick="logout()"></a>
    </div>
    <ul class="nav">
     
    </ul>
</nav>

<div class="content-wrapper">
  Hello
</div>

＆＃13;

Answer 1

我设法做到了。

＆＃13;

var isOpen = true;

$(document).ready(function () {

    $('#menuToggler').click(function () {
       isOpen ? hideMenu() : showMenu();
    });
});


function showMenu() {
    $('#sidebar').css('display', 'block');
    $('#top-menu').css('left', '224px');
    $('.content-wrapper').css('width', 'calc(100% - 225px)');
    $('.content-wrapper').css('margin-left', '225');
    $('#navbar-icon').removeClass().addClass('fa fa-arrow-left');
    isOpen = true;
}

function hideMenu() {
    $('#sidebar').css('display', 'none');
    $('#top-menu').css('left', '0');
    $('.content-wrapper').css('width', '100%');
    $('.content-wrapper').css('margin-left', '0');
    $('#navbar-icon').removeClass().addClass('fa fa-bars');
    isOpen = false;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

＆＃13;

Answer 2

.toggle()在jQuery 1.8中已被弃用

https://api.jquery.com/toggle-event/

相反，你可以创建一个活跃的＆＃39;在<button>元素上添加一个事件监听器，然后使用.toggleClass()。

https://api.jquery.com/toggleClass/

Answer 3

您可以使用click事件切换父元素上的类（我在本例中使用了body标签）并使用CSS控制样式：

$("#menuToggler").on("click", function() {
    $("body").toggleClass("toggled");
});

CSS：

.sidebar {
  display: none;
}
.top-menu {
  left: 0;
}
.content-wrapper {
  width: 100%;
  margin-left: 0;
}

.toggled .sidebar {
  display: block;
}
.toggled .top-menu {
  left: 224px;
}
.toggled .content-wrapper {
  width: calc(100% - 225px);
  margin-left: 225px;
}

使用按钮进行简单切换

3 个答案: