0

我正在编写一个简单的小下拉栏，它会在单击按钮时触发。我在工作 jsfiddle 中有它：http: //jsfiddle.net/sir_charles804/bC4WD/13/，但它不会在网站上运行。任何想法为什么？在网站上有 angularjs jQuery 和 bootstrap，所以我不确定其中之一是否会妨碍您。网站上的代码是

HTML

<div id="notificationBar">
    Latest Major News Update
    <button class="pull-right" style="position:relative;" id="hideButton" >notification   </button>
</div>
<button class="pull-right notificationButton" id="showbutton">notification </button>

JS（现在在正文中定义用于测试）

var showNotifications = function () {
    document.getElementById("notificationBar").style.marginTop = "-8px";
};
var hideNotifications = function () {
    document.getElementById("notificationBar").style.marginTop = "-40px";
};

var showButton = document.getElementById('showButton');
var hideButton = document.getElementById('hideButton');

showButton.onclick = showNotifications;
hideButton.onclick = hideNotifications;

CSS（在外部工作表中）

#notificationBar {
  display: block;
  background-color: #cccccc;
  color:black;
  height: 30px;
  width:100%;
  z-index: 4;
  padding:0px;
  right:0px;
  left:0px;
  margin:0px;
  position:absolute;
  margin-top:-40px;
  -webkit-transition:margin-top .5s ease-in-out;
  -moz-transition:margin-top .5s ease-in-out;
  -o-transition:margin-top .5s ease-in-out;
  transition:margin-top .5s ease-in-out;
  box-shadow:1px 0 3px rgba(0, 0, 0, .75);
}

看出什么问题了吗？

编辑：

如果我手动更改 css 以反映过渡，那么它就会出现，所以看来我的问题是访问 javascript 中的属性。您知道什么会导致我无法访问/更改style.marginTop房产吗？或者为什么更改该属性不会导致更改边距？

4

1 回答 1

0

我通过将该功能放入window.onload = function() {};

我的问题是它试图分配未定义的“onclick”属性。

于 2013-05-24T16:24:02.217 回答