我有3个div,在点击相对链接时切换。当切换div而另一个已经激活时,它将替换“previous”:
<script>
jQuery(document).ready(function(){
jQuery(".toggleddivs").hide();
jQuery('.togglelink').click(function(){
jQuery(".toggleddivs").hide();
jQuery("#"+jQuery(this).data('target')).slideToggle();
});
});
</script>
<a class="togglelink" data-target="div1">togglelink1</a>
<a class="togglelink" data-target="div2">togglelink2</a>
<a class="togglelink" data-target="div3">togglelink3</a>
<div class="toggleddivs" id="div1">CONTENT_DIV1 <a class="toggle" data-target="div1">CLOSE</a></div>
<div class="toggleddivs" id="div2">CONTENT_DIV2 <a class="toggle" data-target="div2">CLOSE</a></div>
<div class="toggleddivs" id="div3">CONTENT_DIV3 <a class="toggle" data-target="div3">CLOSE</a></div>
DEMO(在我的实际网站中就是这样):http://jsfiddle.net/RKVY7/
除了
之外,它工作正常1)我不知道如何使关闭按钮起作用(见演示)
2)当切换div时,页面向上移动。如何“阻止”页面的位置?
答案 0 :(得分:0)
1)您需要将div中的类名称从“切换”更改为其他类似“close”的内容,然后添加:(请参阅example)
jQuery('.close').click(function(){
jQuery(".comefareper").slideUp( "slow", function() {
$(this).hide();
});
});
2)您需要在代码运行之前保存当前滚动,并在完成后将其设置回保存位置:
jQuery(document).ready(function(){
jQuery(".comefareper").hide();
var currentScrollTop = $(window).scrollTop();
jQuery('.toggle').click(function(){
jQuery(".comefareper").hide();
jQuery("#"+jQuery(this).data('target')).slideToggle();
$(window).scrollTop(currentScrollTop);
});
jQuery('.close').click(function(){
jQuery(".comefareper").slideUp( "slow", function() {
$(this).hide();
$(window).scrollTop(currentScrollTop);
});
});
});
答案 1 :(得分:0)
所以我毕竟操纵了大量的JS代码,以便从callback-hell提防你。 毕竟你应该使用元素的类。很难查看代码。但继承人的结果是:
的 jsfiddle (http://jsfiddle.net/RKVY7/7/) 强> 的
的 HTML 强> 的
<a class="togglelink" data-target="div1">togglelink1</a>
<a class="togglelink" data-target="div2">togglelink2</a>
<a class="togglelink" data-target="div3">togglelink3</a>
<div class="container">
<div class="toggleddivs" id="div1">CONTENT_DIV1 <a class="toggle" data-target="div1">CLOSE</a></div>
<div class="toggleddivs" id="div2">CONTENT_DIV2 <a class="toggle" data-target="div2">CLOSE</a></div>
<div class="toggleddivs" id="div3">CONTENT_DIV3 <a class="toggle" data-target="div3">CLOSE</a></div>
</div>
CSS (适用于.container)
.container {
display: inline-block;
padding: 0;
margin : 0;
}
的 JS 强> 的
jQuery(document).ready(function(){
// INT
// the height of the highest one
var highestcomefareper = 0;
// get highest comefareper so it will not scroll up.
var _gethighestcomefareper = function () {
var _height = jQuery(this).height();
if(highestcomefareper<_height) {
highestcomefareper = _height;
}
};
// It's not a "real toggle". Just close all and slide down the one
var _togglecomefareper = function(){
var _target = jQuery(this).data('target');
jQuery(".comefareper").hide();
jQuery("#"+_target).slideDown();
};
// close the nearest element with the class "comefareper". So don't use it in these boxes again
var _closecomefareper = function () {
jQuery(this).closest('.comefareper').slideUp();
};
// Get highest comefareper
jQuery(".comefareper").each(_gethighestcomefareper);
// Assign height to the container. (Prevents page from up-scrolling on close)
jQuery(".container").css("min-height", highestcomefareper + "px");
// Hide All
jQuery(".comefareper").hide();
// Assign functions to the buttons
jQuery('.toggle').click(_togglecomefareper);
jQuery(".close").click(_closecomefareper);
});