我在这里有很多问题所以请耐心等待我,非常新的jquery / javascript用户。
这是我当前的页面http://integratedcx.com/index.php/experience
基本上我希望每个项目和项目类别都有隐藏的div,像抽屉一样滑动,不仅仅像现在一样出现。
我试图通过jquery实现这一目标但没有取得多大成功,这是我的工作http://integratedcx.com/temp/slide.html
感谢您提前获得任何/所有帮助。
答案 0 :(得分:1)
对于您的问题4,使用以下脚本(基于上面的ComputerArts's answer),您可以轻松地将幻灯片效果添加到大量div:
$(document).ready(function () {
$(".toggle-to-show").click(function (evt) {
var targetdiv = $(evt.currentTarget).attr("data-drawer");
$(targetdiv).slideToggle(1000, function() {
if ($(this).is(':visible')) {
$('.bracket', evt.currentTarget).html('less');
$('.project', evt.currentTarget).hide();
$('.closebox', this).bind('click', function(e) {$(evt.currentTarget).triggerHandler('click');});
}
else {
$('.bracket', evt.currentTarget).html('more');
$('.project', evt.currentTarget).show();
$('.closebox', this).unbind('click');
}
});
})
})
然后,您可以按如下方式标记切换按钮和滑块:
<div class="toggle-to-show" data-drawer="#firstsection">
<div class="project">Project One Heading</div>
<div class="bracket">more</div>
</div>
<div id="firstsection">
<h3>Project One Heading</h3>
stuff
<img class="closebox" src="close.jpg">
</div>
<div class="toggle-to-show" data-drawer="#secondsection">
<div class="project">Project Two Heading</div>
<div class="bracket">more</div>
</div>
<div id="secondsection">
<h3>Project Two Heading</h3>
stuff
<img class="closebox" src="close.jpg">
</div>
<div class="toggle-to-show" data-drawer="#thirdsection">
<div class="project">Project Third Heading</div>
<div class="bracket">more</div>
</div>
<div id="thirdsection">
<h3>Project Three Heading</h3>
stuff
<img class="closebox" src="close.jpg">
</div>
答案 1 :(得分:0)
http://api.jquery.com/slideDown/
$("#link_id").click(function(){
$("#div_to_show").slideDown();
});
http://api.jquery.com/slideUp/
$('#div_to_close').slideUp();
使用1和2
通过使用类名而不是选择器的ID。例如:
$(".link_class").click(function(){
$(this).parentsUntil('.ex-wrapper').find('.div_to_show').slideDown();
});
答案 2 :(得分:0)
对于第1点和第2点,try this fiddle 我只将第一个脚本标记更改为
<script type='text/javascript'>
$(document).ready(function () {
$(".projectx-show").click(function () {
$("#projectx").slideToggle(1000, function() {
if ($(this).is(':visible')) {
$('#projectx-bracket').html('less');
}
else {
$('#projectx-bracket').html('more');
}
});
})
})
</script>
仅供参考,您不需要使用$(window).load
然后使用$(document).ready
......一个就够了
对于#3,我不明白你想说什么。
#4,是的,有一种方法,使用类并保持页面中每个块的结构相同。