Question

html

<body>

  <header>
    <a href="#" id="toggle-button">
      <img src="img/menu_icon.svg">
    </a>
  </header>

  <main id="wrapper">

    <aside id="sidebar-wrapper">
      <div></div>
    </aside>

    <section id="page-content-wrapper">
      <div id="map"></div>
    </section>

  </main>

</body>

我不知道如何用淘汰赛来达到相同的效果

JQuery

$('#toggle-button').click(function(event){
  event.preventDefault();
  $("img", this).toggleClass('rotated');
  $('#wrapper').toggleClass('menu--visible');
});

我正在使用css绑定，但是在我执行操作时，我不知道如何将类添加到＃toggle-button之外的其他元素中 here。有什么想法/材料/文档可以帮助我吗？

Answer 1

您可以使用一个observable来切换img和#wrapper的类。您只需要在每次单击期间切换可观察值即可。使用css绑定根据可观察对象的值来应用和删除类。

var viewModel = {
toggle : ko.observable(false)
}

ko.applyBindings(viewModel);

.rotated{
transform: rotate(90deg);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<body>

  <header>
    <a href="#" id="toggle-button" data-bind="click:function(){toggle(!toggle())}">
      <img src="https://cdn.xl.thumbs.canstockphoto.com/canstock33334848.jpg" data-bind="css: {rotated : toggle() }">
    </a>
  </header>

  <main id="wrapper" data-bind="css: {'menu-visible' : toggle() }">

    <aside id="sidebar-wrapper">
      <div></div>
    </aside>

    <section id="page-content-wrapper">
      <div id="map"></div>
    </section>

  </main>

</body>

使用Knockout

1 个答案: