Question

我目前正在使用下面的代码，效果很好。但是，我遇到了一些问题/限制，这让我觉得使用jQuery UI折叠效果代替js animate函数会更合适。

由于我对JS不是很熟悉，你可以帮我调整下面的代码来使用jQuery UI折叠效果而不是动画功能吗？非常感谢

JS：

$("a").click(function () {
  var page = $(this).data("page");
  if ($('div:animated').id != page) {
    var active = $(".fold.active");

    // if there is visible fold element on page (user already clicked at least once on link)
    if (active.length) {
      active.animate({
        width: "0"
      }, 200)
      .animate({
        height: "0"
      }, 200, function () {
        // this happens after above animations are complete
        $(this).removeClass("active");
      });
      // clicking for the first time
    };
    if (active.attr("id") != page) {
      $("#" + page)
      .addClass("active")
      .animate({
        height: "500px"
      }, 1000, 'linear')
      .animate({
        width: "500px"
      }, 400, 'linear')
    }
  }
});

Answer 1

修改：

这花费了大量的时间，因为奇怪的CSS行为，所以问题是我删除了这条规则：

.fold.active { display: inline-block; }

解决方案在这里：http://jsfiddle.net/3tf5ttrf/

$("a").click(function () { var page = $(this).data("page"); var selected = $("#" + page); var active = $('.fold.active') if (active.length > 0) { if (active.first().is(selected.first())) { console.log('same'); toggleEl(selected); } else { console.log('diff'); toggleEl(active); toggleEl(selected); } } else { console.log('zero'); toggleEl(selected); } }); function toggleEl(el) { el.toggleClass("active"); el.toggle("fold"); }

Answer 2

您的代码非常接近您的需求。我认为主要问题是你的风格和理解它们如何与效果相互作用。

折叠效果将根据当前状态显示或隐藏元素。你有.fold类以0x0像素开始你的div并隐藏，但你真正想要的是一个规则，它描述你的div在向用户显示时的样子。

原件：

.fold {
    display: none;
    width: 0;
    height: 0;
    position: absolute;
}

修正：

.fold {
    width: 500px;
    height: 500px;
    position: absolute;
}

由于您的.fold样式现在描述了div的结束状态，因此它不再具有display: none;规则。由于您希望最初隐藏div，因此您应该添加一些Javascript来隐藏最初的那些：

$(".fold").hide();

现在，您可以使用折叠效果：

，而不是手动设置样式动画

原件：

// if there is visible fold element on page (user already clicked at least once on link)
if (active.length) {
    active.animate({
        width: "0"
    }, 200)
        .animate({
        height: "0"
    }, 200, function () {
        // this happens after above animations are complete
        $(this).removeClass("active");
    })

    // clicking for the first time
}
if (active.attr("id") != page) {
    $("#" + page)
        .addClass("active")
        .animate({
        height: "500px"
    }, 1000, 'linear')
        .animate({
        width: "500px"
    }, 400, 'linear')

}

更新：

if (active.length) {
    active.toggle("fold", function () {
      $(this).removeClass("active");
    });
}
// clicking for the first time
if (active.attr("id") != page) {
    $("#" + page)
      .addClass("active")
      .toggle("fold");
}

既然所有这些都有效，我想你会想要玩一些设置。 documentation for the fold effect表示您可以设置元素折叠时的大小以及折叠顺序。为了模仿您发布的链接，我将size设置为5，因为您的div具有5px边框。我还会将horizFirst设置为true，因为这就是您的示例所示。

我还决定使用toggleClass代替addClass("active")和removeClass("active")。这导致设置更简单。

这是成品：

$(".fold").hide();

var foldSettings = {
    easing: 'linear',
    duration: 1200,
    size: 5,
    horizFirst: true,
    complete: function () {
        $(this).toggleClass("active");
    }
}

$("a").click(function () {
    var page = $(this).data("page");
    if ($('div:animated').id != page) {
        var active = $(".fold.active");

        // if there is visible fold element on page (user already clicked at least once on link)
        if (active.length) {
            active.toggle("fold", foldSettings);
        }
        // clicking for the first time
        if (active.attr("id") != page) {
            $("#" + page).toggle("fold", foldSettings);
        }
    }
});

http://jsfiddle.net/z69zofxm/3/

Answer 3

试试这个更少的JS更多CSS

＆＃13;

$("li").on("click", function () {
    var dataPage = $(this).find("a").attr("data-page");
    console.log(dataPage);
    $("[id="+ dataPage + "]").addClass("active").siblings("div.fold").removeClass("active");
    $(this).addClass("active").siblings("li").removeClass("active")
});

＆＃13;

.fold {
    width: 0px;
    height: 0px;
    overflow: hidden;
    position: absolute;
    transition: width .8s ease-in-out, height .8s .8s ease-in-out 
}
.fold.active {
    width: 500px;
    height: 500px;
    transition: height .8s ease-in-out, width .8s .8s ease-in-out
}

#fold1 {
    border: 5px solid #bada55;
    background: red
}
#fold2 {
    border: 5px solid #fed900;
    background: aqua
}
#fold3 {
    border: 5px solid #223322;
    background: green
}
#fold4 {
    border: 5px solid #55bada;
    background: purple
}
ul {
    position: absolute;
    top: 50px;
    right: 50px;
    list-style-type: none
}
li.active a{color: red}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="fold1" class="fold" >Div menu item 1</div>
<div id="fold2" class="fold" >Div menu item 2</div>
<div id="fold3" class="fold" >Div menu item 3</div>
<div id="fold4" class="fold" >Div menu item 4</div>
<nav>
    <ul>
        <li><a href="#" data-page="fold1">Menu item 1</a>

        </li>
        <li><a href="#" data-page="fold2">Menu item 2</a>

        </li>
        <li><a href="#" data-page="fold3">Menu item 3</a>

        </li>
        <li><a href="#" data-page="fold4">Menu item 4</a>

        </li>
    </ul>
</nav>

＆＃13;

用jquery ui fold效果替换JS动画

3 个答案: