Javascript firefox中的手风琴盒故障
我用javascript编写了下面的函数,它操作一个向上/向下滑动框。但在firefox中,它会出现故障。它只打开/关闭一次。在那之后就没有比赛了。 我从框中获取height()参数并将其存储在隐藏输入中。但是firefox无法读取盒子的正确高度 查看代码以更好地理解: JS: HTML:Javascript firefox中的手风琴盒故障,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我用javascript编写了下面的函数,它操作一个向上/向下滑动框。但在firefox中,它会出现故障。它只打开/关闭一次。在那之后就没有比赛了。 我从框中获取height()参数并将其存储在隐藏输入中。但是firefox无法读取盒子的正确高度 查看代码以更好地理解: JS: HTML: <section class="accBox grey"> <header> <div class="title">DISCLAIMERS</
<section class="accBox grey">
<header>
<div class="title">DISCLAIMERS</div>
<a style="display: none;" class="btnExpand" href="javascript:void(0);"><img src="/resources/images/boxExpandGrey.jpg" alt="button"></a>
<a style="display: block;" class="btnCollapse" href="javascript:void(0);"><img src="/resources/images/boxCollapseGrey.jpg" alt="button"></a>
</header>
<div id="accTipsBox" style="height: 125px; padding: 0px;">
<input type="hidden" id="boxHeight" value="125">
<div class="accBoxContent">
<div><p></p><p></p><p></p></div>
</div>
</div>
</section>
免责声明
我想这就是你想要的:
//bind a `click` event handler to all the elements with the `btnExpandCollapse` class
$('.btnExpandCollapse').on('click', function (event) {
//stop the default behavior of clicking the link (stop the browser from scrolling to the top of the page)
event.preventDefault();
//first select the parent of this element (`header` tag) and then get its sibling element that has the `accTipsBox` class, then take that element and slide it up or down depending on its current state
$(this).parent().siblings('.accTipsBox').slideToggle(500);
});
对HTML进行一些细微的调整:
<section class="accBox grey">
<header>
<div class="title">DISCLAIMERS</div>
<!-- Notice there is only one link now that does the job of both -->
<a class="btnExpandCollapse" href="#"><img src="/resources/images/boxExpandGrey.jpg" alt="button"></a>
</header>
<!-- Notice I changed the ID attribute to CLASS so this code will work for repeated structure -->
<div class="accTipsBox" style="height: 125px; padding: 0px;">
<div class="accBoxContent">
<div>
<p>1</p>
<p>2</p>
<p>3</p>
</div>
</div>
</div>
</section>
然后您可以像这样访问这些数据
var height = $.data($('#accTipsBox')[0], 'height');
请注意,我在jQuery对象的末尾追加了[0]
,以仅返回与该对象关联的DOM节点,这是$.data()方法所必需的。这是一种存储与DOM元素关联的数据的非常快速的方法
var $box = $("#accTipsBox");
$.data($box[0], 'height', $box.height());
var height = $.data($('#accTipsBox')[0], 'height');