- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我找到了一个简单的选项卡菜单 jQuery 插件,它需要为我的元素进行一些调整。有问题的选项卡 - 绝对定位 - 从流程中取出,因此不会影响包装 div 的高度,因此它们后面的背景不会显示。我试图强制包装 div(包含背景图像)的高度与所选选项卡的高度(导航和标题的 +400px)相匹配,并在运行中实现这一点,我正在调整原始 jQuery 文件。这是我的代码(带有几行额外的代码(注释为“已添加!”))。
var cbpHorizontalMenu = (function () {
var $listItems = $('#cbp-hrmenu > ul > li'),
$menuItems = $listItems.children('a'),
$body = $('body'),
current = -1;
function init() {
$menuItems.on('click', open);
$listItems.on('click', function (event) {
event.stopPropagation();
});
}
function open(event) {
if (current !== -1) {
$listItems.eq(current).removeClass('cbp-hropen');
}
var $item = $(event.currentTarget).parent('li'),
idx = $item.index();
if (current === idx) {
$item.removeClass('cbp-hropen');
//added!
current = -1;
} else {
$item.addClass('cbp-hropen');
current = idx;
$body.off('click').on('click', close);
var content2Height = jQuery(".cbp-hrsub").height() + 400;
jQuery('#content2').height(content2Height); //added
}
return false;
}
function close(event) {
$listItems.eq(current).removeClass('cbp-hropen');
//added!
current = -1;
}
return {
init: init
};
})();
它做了一些事情,但不是我需要的。它获取 first div.cbp-hrsub 的高度并将其 (+400px) 应用于 div.content2。我需要的是定位 current 选项卡(我认为是 event.currentTarget 的子项?),计算其高度并将其应用于 content2 div。
如果有帮助,这是一个简化的 HTML:
<div class="content2">
<nav id="cbp-hrmenu" class="cbp-hrmenu">
<ul>
<li>
<a href="#">tab 1</a>
<div class="cbp-hrsub">
<div class="cbp-hrsub-inner">
I am 1st tab, 100px height.
</div>
</div>
</li>
<li>
<a href="#">tab 2</a>
<div class="cbp-hrsub">
<div class="cbp-hrsub-inner">
I am 2nd tab, 200px height.
</div>
</div>
</li>
<li>
<a href="#" class="white06">Nigel's CV</a>
<div class="cbp-hrsub">
<div class="cbp-hrsub-inner">
I am 3rd tab, 300px height.
</div>
</div>
</li>
</ul>
</nav>
澄清一下,我想保持原来的插件不变,只是在文件末尾插入一些东西而不是我的 2 行。 (var content2Height = jQuery(".cbp-hrsub").height() + 400;jQuery('#content2').height(content2Height);//添加感谢大家的宝贵时间。
泽尔
最佳答案
当使用 .parent() 定位父容器时,我得到不一致的结果。在这一行中:
var $item = $(event.currentTarget).parent('li'),
idx = $item.index();
尝试改用 .closest():
var $item = $(event.currentTarget).closest('li'),
idx = $item.index();
哦,等等!我看到了问题:
var content2Height = jQuery(".cbp-hrsub").height() + 400;
您正在此处检索所有 .cbp-hrsub 分类元素。它会尝试返回一个高度,我不确定 jQuery 在查看数组时如何确定高度,但我猜它只是从数组中挑选第一个元素。
此时你真正需要的是这样的东西:
var content2Height = $item.first(".cbp-hrsub").height() + 400;
这应该为您提供包含在当前元素(上面找到的)中的 .cbp-hrsub 的高度,而不是数组中第一个 .cbp-hrsub 的高度。
关于javascript - 定位 event.currentTarget 的 child ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20748137/
当检测鼠标x和y坐标时,最好像这样使用event.clientX和event.clientY: function show_coords(event){ var x=event.clientX;
我有以下代码: document.oncontextmenu = function(evt) { evt = evt || window.event; console.log(evt.
对于另一个问题,我遇到了一个似乎偶尔出现在 SO 的误解。一些提问者似乎认为触发器之于数据库就像事件之于 OOP 一样。 有没有人有一个很好的类比来解释为什么这是一个有缺陷的比较,以及误用它的后果?
$('body').keypress(function(event){ if(event.keyCode == 46){console.log('Delete Key Pressed')};
我正在制作一个“流体”文本区域,它根据内容调整其高度。我实际上正在尝试实现 this脚本。我有以下代码:https://ellie-app.com/Vjtvm6yrKWa1/4 问题是,当增加高度时,
我使用 Raphael .mouseover() 和 .mouseout() 事件来突出显示 SVG 中的某些元素。这工作正常,但在我单击一个元素后,我希望它停止突出显示。 在 Raphael doc
我目前正在开发一个应用程序,允许人们为在线广播电台安排“节目”。 我希望用户能够设置重复事件,例如:- “躁狂星期一”节目 - 每周一 9 点至 11 点“月中疯狂” - 每个月的第二个星期四“本月新
我有以下三个表格(简化版本): 已加载关卡: id(整数、主键、自动增量) globalId(整数,键) 日期(日期时间、键) serverId(Int,键) gamemodeId(Int,Key)
在我阅读 Gevent Tutorial 之后,我有一个关于 gevent.event.Event 的问题。 Event.set() 是否会唤醒所有被 Event.wait() 阻塞的函数? 就像下面
我对 cakephp ver3.1.3 没有经验 我按照说明实现了登录认证功能; http://book.cakephp.org/3.0/en/tutorials-and-examples/blog-
现在,我发送 10 个事件,每个事件有 1 个属性。但是当我想过滤特定事件并按属性选择事件时,在“事件属性”过滤器中仅显示前 7 个事件,而我为其余事件添加的事件仅显示“第一次”过滤器,为什么? 最佳
我不知道我的 Firefox 发生了什么! 我的aspx和javascript代码是这样的: function a() { alert(
中有3个事件fns重装 ,我可以对两者做同样的事情 reg-event-db和 reg-event-fx . reg-event-db之间的主要区别是什么, reg-event-fx和 reg-eve
我遇到了 Firefox keydown 行为,因为在没有聚焦于特定字段的情况下按下 Enter 键(实际上是任何键)不会触发 keydown 事件只会触发`按键事件。 这可能会非常令人困惑,因为 k
这是我的代码片段 public class Notation : INotifyPropertyChanged { public event PropertyChangedEventHandl
我可以在一个 Jsf2 xhtml 文件中有多个标签吗? 在那种情况下,关联的监听器将以什么顺序被调用? Mojarra 2.1.1/Apache Tomcat 7.0.22/PrimeFaces 3
我可以在一个 Jsf2 xhtml 文件中有多个标签吗? 在那种情况下,关联的监听器将以什么顺序被调用? Mojarra 2.1.1/Apache Tomcat 7.0.22/PrimeFaces 3
我有以下 JavaScript: $('#ge-display').click(function (event) { window.open('/googleearth/ge-display.ph
我需要确定触发事件的元素。 使用 event.target 获取相应的元素。 我可以从那里使用哪些属性? 引用 编号 节点名 我找不到关于它的大量信息,即使在 jQuery 上也是如此页,所以希望有人
我在pyGame中创建了一个Asteroidz克隆,并在pygame.vent.get()循环中有两个for Event,一个用于检查退出请求,以及游戏是否应该通过按空格键开始,然后在游戏中进一步尝试
我是一名优秀的程序员,十分优秀!