Question

我正在设置网页，以便在一定宽度下，右侧滑动菜单将成为从上到下滑动菜单。为此，我使用javascript来更改按钮的onclick属性，但网页仍然像以前一样继续工作，具有从右到左的滑动效果。我附上与菜单相关的代码。

HTML：

<div id="header">
    <header id="title">
        <h1>The Nest</h1>
        <p id="para">The hostel where your journey should start</p>
        <button type="button" class="btn btn-lg" id="menu-btn" onclick="openSide()">
            <span class="glyphicon glyphicon-list"></span>
        </button>
    </header>
</div>

<div id="sidebar">
    <a href="javascript:void(0)" id="close-btn" onclick="closeSide()">&times;</a>
    <a href="#">Accomodations</a>
    <a href="#">Services</a>
    <a href="#">Merchandising</a>
    <a href="#">About us</a>
</div>

javascript＆amp; jQuery的：

var main = function() {


$(window).resize(function() {

  var width = $(window).width();

  if (width < 1023) {

      document.getElementById("para").innerHTML = "Barcellona fine stay";

      $("#menu-btn").click(function() {
         $("#para").fadeOut("fast");
         $("#menu-btn").fadeOut("fast");
         });

      $("#close-btn").click(function() {
         $("#para").fadeIn("slow");
         $("#menu-btn").fadeIn("slow");
         });
  }    

  else if (width > 1024) {

      document.getElementById("para").innerHTML = "The hostel where your journey should start";

  }

  else if (width < 380) {

      document.getElementById("menu-btn").onclick = function() { openTop(); };
      document.getElementById("close-btn").onclick = function() { closeTop(); };

      $("#menu-btn").click(function() {
         $("#header").fadeOut("fast");
         });

      $("#close-btn").click(function() {
         $("#header").fadeIn("slow");
         });

  }    

  return true;

 });

}

$(document).ready(main);

我刚刚添加了整个if / else语句，因为它似乎是最后一个“else if”它不起作用

Answer 1

尝试改变这一点：

$("#menu-btn").click(function() {
    $("#header").fadeOut("fast");
});

到这个

$("body").on('click', '#menu-btn', function() {
    $("#header").fadeOut("fast");
});

它应该有帮助，因为Jquery方法click不适用于动态元素，这些元素是在DOM准备好并进行解析后添加的。

使用javascript设置新的onclick属性不起作用

1 个答案: