CodePen Demo - Staged site

Question

我正在制作一个简单的网站，以便在会议上使用，我正在寻求一些帮助，了解两种方法对实现效果的影响：

使用.toggle()显示或隐藏内容

这是我开始使用的方法，因为它是一个直观的操作，可以点按元素以显示其内容。但是，当我尝试一次限制一个打开的div时会出现问题。

摘要我无法限制已打开元素的数量。

将active类应用于jQuery

使用此方法，我可以通过选择子元素来显示隐藏的内容（请参阅下面的代码），但这会阻止用户再次点击内容来关闭内容。因为我正在水平扩展div，所以这并不理想，因为添加了滚动空间。

摘要：如何使用此方法在第二次点击时关闭活动div？

CodePen Demo - Staged site

相关代码

此方法使用CSS来应用活动类。它可以工作，但就像我上面所说的那样，我很难从一个被再次点击的元素中删除active类。使用上面链接的演示来查看切换操作在页面上的工作方式（取消注释第8和第9行）。

$(".title").click(function() {
     //remove active class from other elements
     $('.post').removeClass('active');
     // Bind to the div
     $post = $(this);
     // Set active class on .post to control scroll position
     $post.parent().toggleClass('active');
     // Toggles the hidden .content div
     //$post.next().toggle(250);
     $('html, body').animate({scrollLeft: $('.active').offset().left},500);
});

随附的.active CSS：

.post .content {
  display:none;
}
.active {
  margin-top:-120px;
}

/* Shows the content div rather than toggling with jQuery */
.active > .content {
  display:block;
}

有没有办法可以同时允许这两种行为（点击打开/关闭，一次打开一个div）？哪种方法最适合？

Answer 1

你当然可以使用toggle()而隐藏其他的$(".title").click(function() { $('.post').not($(this).parent()).hide(); $(this).toggle(); $('html, body').animate({scrollLeft: $(this).parent().offset().left},500); });。尝试这样的事情：

.not(this)

更新：将.not($(this).parent())更改为.title，因为.post始终是{{1}}的孩子。

Answer 2

@ Daniel解决方案的略微优化版本

$('.title').click(function() {
  var clickedPost = $(this).parent('.post')
  clickedPost.toggle().siblings('.active').hide();
  $('html, body').animate({scrollLeft: clickedPost.offset().left},500);
});

本地var：如果您在作用域内多次访问this或任何其他DOM元素，将它分配给本地var而不是将其包装在一个局部var中总是更有效率JQ对象多次。

SIblings选择器：我没有这方面的基准测试，但是在DOM的子集而不是整个DOM上运行选择器似乎直观上更快。这是一个比大性能命中更好的做法，但所有小功能也加起来。

链接JQuery函数：大多数作用于JQ元素的JQ函数都返回该元素。我不能说这更有效但它肯定更简洁，但这完全取决于个人偏好。

Answer 3

使用非常少的代码，您可以通过切换来完成此操作。

$(".title").click(function() {
    $(".post").hide();
    $(this).children(".post").toggle();
});

我尽可能简单地展示了你可以扩展的功能。

这是jsfiddle

评论后

编辑更新

我已将其编辑为现在一次只显示1，如果点击当前显示的1，则隐藏它

我还选择使用slideUp()和slideDown()，因为它似乎更符合您的需求

$(".title").on("click", function(){
    if($(this).children(".post").is(":visible")){
        $(this).children(".post").slideUp();
    }else{
        $(".post").not($(this).parent()).slideUp(500);
        $(this).children(".post").slideDown(500);
    }
});

更新jsfiddle

使用`.toggle（）`而不是应用类来显示内容

CodePen Demo - Staged site

3 个答案: