作者热门文章
- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我想自定义 jQuery 脚本,以便在单击 3 个不同选项卡中的 1 个时识别不同的“当前”状态。目前,代码只允许识别一种“当前”状态,因此当我单击不同的选项卡时,会显示按钮的相同夸大状态。我已经仔细检查了我的代码好几个小时,现在我不同意您的专业知识来寻求帮助。
可能的解决方案?:添加某种 ID 监听器,识别当前状态显示为夸大状态。
HTML 片段:
<ul class="nav">
<li><a href="#"><img src="textSpacer.png" width="87" height="20"></a>
<ul>
<img src="subContentSearch.gif">
</ul>
</li>
<li><a href="#"><img src="textSpacer.png" width="84" height="20"></a>
<ul>
<img src="subContentNewsSignUp.gif">
</ul>
</li>
<li><a href="#"><img src="textSpacer.png" width="100" height="20"></a>
<ul>
<img src="subContentMyVictory.gif">
</ul>
</li>
jQuery.Clickme.js:
(function($) {
$.fn.clickMe = function(op_user) {
var menuName = this,
op = $.extend( cm.op_default , op_user);
$(menuName).find("li:has(ul)").addClass("arrow");
// move content to inicial margin
$(op.moveIt).css({ marginTop: op.moveItMargin });
// anchor inside menu active the code
$(menuName).find("a").click(function() {
var ulsVisible = $(menuName).find("ul").is(":visible");
var testUl = $(this).next("ul").is(":visible");
// hide and remove op.activeMenu class from visible list inside the menu
if (ulsVisible) {
// know if the anchor that active the function is visible
if(testUl) {
$(menuName).find("li").removeClass(op.activeMenu);
moveContent();
$(this).next("ul").animate(op.aniHide, op.speed);
} else {
$(menuName).find("li").removeClass(op.activeMenu);
$(menuName).find("ul").animate(op.aniHide, op.speed);
$(this).parent("li").addClass(op.activeMenu);
moveContent();
$(this).next("ul").animate(op.aniShow, op.speed );
}
} else {
$(this).parent("li").addClass(op.activeMenu);
moveContent();
$(this).next("ul").animate( op.aniShow, op.speed);
}
});
// Move content
function moveContent() {
var ulHeight = $("."+op.activeMenu +" ul").height() ;
var moveMargin = parseFloat($(op.moveIt).css("margin-top"));
var dif = ulHeight + op.moveItMargin - moveMargin;
if (ulHeight == moveMargin) {
} else if (ulHeight < moveMargin) {
$(op.moveIt).animate({marginTop: "+=" + dif}, op.speed);
} else if (ulHeight > moveMargin){
$(op.moveIt).animate({marginTop: "+=" + dif}, op.speed);
}
}
};
var cm = $.fn.clickMe;
cm.op = {};
cm.op_default = {
activeMenu: "current",
moveIt: ".content",
moveItMargin : 0,
aniShow: { opacity: "show", height: "show"},
aniHide: { opacity: "hide", height: "hide"},
speed: "fast"
};
})(jQuery);
正在使用的 CSS 代码段:.current {背景颜色:#D1EFEF;}.current a {颜色:#FFF;背景图像:url(“siteSearch_down.gif”);}.current a:hover {color: #000;}
我衷心感谢您的时间和帮助。
最佳答案
在黑暗中拍摄,但也许在外部范围内设置状态之类的事情可以帮助你..
var fnc, state = 'state1';
fnc = function () {
if (state === 'state1') {
// do something
// update the state
state = 'state2';
}
// ... etc
};<p></p>
<p></p>
关于jQuery:多个当前夸大的问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/4293282/
我有一个要添加到 View 中的动画。在动画中,我有一个像折叠一样折叠的单元格。我将 View 分成两个单独的层,并在每个层上应用旋转。这是有效的,但是,效果比我想要的更微妙。我正在寻找一种方法来增加
我是一名优秀的程序员,十分优秀!