我正在使用Unsemantic框架在HTML5中创建一个单页网站,链接到Fancybox 2中显示的隐藏div,并且无法正确地调整所有不同类型的内容.
有三个div - 一个包含div中的文本,包含在隐藏的div中,因此我可以相应地操作内容,一个包含图像库,另一个包含YouTube视频的链接.我创建了一个隐藏类,我通过CSS调用它:
文本部分的HTML:
<a class="fancybox" href="#bio">...blah blah blah...
...then later on...<article class="hidden" id="bio">
视频部分的HTML:
<a class="fancybox fancybox.iframe" href="https://www.youtube.com/video">Videos</a>
CSS:
.hidden {
overflow:hidden;
display:none;
}
在<head>标签内部调用Fancybox :
<script type="text/javascript">
$(document).ready(function() {
$("#fancybox-gallery").click(function() {
$.fancybox.open([
{
href : "image_1.jpg",
}, {
href : "image_2.jpg",
}, {
href : "image_3.jpg"
}
], {
helpers : {
thumbs : {
width: 75,
height: 50
}
}
});
});
});
</script>
使用Fancybox 2默认值(autoSize:true,autoWidth:false和autoHeight:false …
这是一个小提琴;
我希望用动态创建的元素来做这个,所以在调用函数时div实际上可能不存在.
我想尝试找出一个可以覆盖x数量的div并用最少的代码处理它的解决方案,但是在确定一种方法来覆盖更多之前,制作一个可以容纳三个div的杂乱版本似乎是合乎逻辑的第一步.
我想我必须使用if - else if语句来检测所有变量的计算,但它似乎不起作用.我希望有人能指出我正确的方向？
在此先感谢 - 下面的代码(在前两个div之间工作);
function collision($div1, $div2, $div3) {
if ($div1.length > 0) {
var x1 = $div1.offset().left;
var y1 = $div1.offset().top;
var h1 = $div1.outerHeight(true);
var w1 = $div1.outerWidth(true);
var b1 = y1 + h1;
var r1 = x1 + w1;
}
if ($div2.length > 0) {
var x2 = $div2.offset().left;
var y2 = $div2.offset().top;
var h2 = $div2.outerHeight(true);
var w2 = $div2.outerWidth(true);
var b2 = y2 + h2;
var r2 = …我有一个相对简单的问题,我正试图解决,似乎无法找到任何关于它的东西.
我正在处理现有产品,在关闭错误模式之后我需要关注给定的表单字段,此时我将存储在变量中.
目前这有效:
$("input[field='number']").focus();
我简化了变量名称.不,我有一个变量如下;
myField ='数字'
但我试图关注这一点是失败的,我试过:
$("input[field=myField]").focus();
$("input[field='myField']").focus();
正如我所说,我已经环顾四周,但遗憾的是找不到我需要的东西.任何帮助将不胜感激.
谢谢
这个jQuery依赖代码怎么样？
$('.myElement').click(function () {
drawMode = !drawMode;
$icon = $(this).children('i');
if (drawMode) {
$icon.removeClass('a').addClass('b');
} else {
$icon.removeClass('b').addClass('a');
}
});
被重写为原生javascript？
我试过了
var element = document.getElementsByClassName('myElement')[0];
element.addEventListener('click', function (e) {
drawMode = !drawMode;
var icon = this.children()[0];
if (drawMode) {
icon.classList.remove('a').add('b');
} else {
icon.classList.remove('b').add('a');
}
});
但我无法正确找到儿童元素.
我创建了一个带有 4 li 和活动类的导航栏
现在我想要当我悬停在第二个 li 上时，我的边框底部会随着动画从第一个 li 移动到第二个 li
这是我的导航栏代码：
.top-bar {
background:#0d0d0d;
width:100%;
height:85px;
position:fixed;
top:0;
z-index:99999;
}
.menu {
float: right;
margin: 16px 50px;
}
.menu li {
float: right;
color: #FFF;
list-style: none;
font-size: 18px;
padding: 15px;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
height: 36px;
}
.menu li:hover {color:#8cc152;}
.active {
border-bottom:3px solid #8cc152;
color:#8cc152 !important;
}
.hvr {
position:relative;
}
.hvr:before …因此,我设法根据第一个选项中的选项更改第二个下拉列表中的选项,但是我希望用户能够在第一个和所有已实现的选项中选择多个选项,然后在第二个下拉列表中显示.
到目前为止我有这个:
https://jsfiddle.net/jkxzy87v/1/
HTML
<select name="County" id="county" multiple="multiple">
<option value="Kent">Kent</option>
<option value="Sussex">Sussex</option>
<option value="Devon">Devon</option>
</select>
<select name="Park" id="parks">
<option>Select a park</option>
</select>
jQuery的
$(document).ready(function() {
$county = $("select[name='County']");
$Park = $("select[name='Park']");
$county.change(function() {
if ($(this).val() == "Kent") {
$("select[name='Park'] option").remove();
$("<option>Kent Park 1</option>").appendTo($Park);
$("<option>Kent Park 2</option>").appendTo($Park);
}
if ($(this).val() == "Sussex")
{
$("select[name='Park'] option").remove();
$("<option>Sussex Park 1</option>").appendTo($Park);
$("<option>Sussex Park 2</option>").appendTo($Park);
}
if ($(this).val() == "Devon")
{
$("select[name='Park'] option").remove();
$("<option>Devon Park 1</option>").appendTo($Park);
$("<option>Devon Park 2</option>").appendTo($Park);
}
});
});
如您所见,从下拉列表中选择单个选项可以正常工作,但选择多个选项并不会将所有选项添加到下拉列表2中.
例如.如果您选择'肯特'和'苏塞克斯',您应该在下拉列表中看到两个'Kent Park …
jquery ×6
javascript ×4
html ×2
animation ×1
css ×1
dropdown ×1
fancybox ×1
fancybox-2 ×1
jquery-ui ×1