0

我试图通过隐藏过滤器直到选择某些内容来使我的同位素过滤器列表更加用户友好。

这是一个 JSFiddle：http: //jsfiddle.net/LxNXM/

我无法让同位素在 JSFIddle 中工作，但希望我仍然可以获得所需的帮助。

在小提琴中，有一条粗绿线。该行下方是我希望隐藏的过滤器选项，除非选择“身体部位”。

因此，如果绿线下方的过滤器被隐藏，并且用户在 Body Part 下选择“胸部”，“胸部”过滤器将淡入，然后用户可以选择上、中或下。

我在 Isotope 文档中没有看到这一点，我怎么能这样做？

让它像这样工作：

  1. 在每个身体部位焦点过滤器列表周围添加了一个 ID，例如：#chestfocus
  2. 为身体部位过滤器列表中的每个锚点添加了一个 id，例如：#chestclick

这是隐藏和显示内容的javascript：

$(document).ready(function() {

//Hiding Focus Areas
    $('#chestfocus, #backfocus, #shouldersfocus, #legsfocus, #armsfocus').hide();


//Display Chest Focus List
    $("#chestclick").click(function() {
        $("#backfocus, #shouldersfocus, #legsfocus, #armsfocus").fadeOut("300", function(){
            $("#chestfocus").fadeIn("500");
        });
    });

//Display Back Focus List
    $("#backclick").click(function() {
        $("#chestocus, #shouldersfocus, #legsfocus, #armsfocus").fadeOut("300", function(){
            $("#backfocus").fadeIn("500");
        });
    });

//Display Shoulder Focus List
    $("#shouldersclick").click(function() {
        $("#backfocus, #chestfocus, #legsfocus, #armsfocus").fadeOut("300", function(){
            $("#shouldersfocus").fadeIn("500");
        });
    });

//Display Legs Focus List
    $("#legsclick").click(function() {
        $("#backfocus, #shouldersfocus, #chestfocus, #armsfocus").fadeOut("300", function(){
            $("#legsfocus").fadeIn("500");
        });
    });

//Display Arms Focus List
    $("#armsclick").click(function() {
        $("#backfocus, #shouldersfocus, #legsfocus, #chestfocus").fadeOut("300", function(){
            $("#armsfocus").fadeIn("500");
        });
    });
});

切换前有点闪烁列表，有没有办法让过渡更顺畅一些？

4

0 回答 0