1

在动画行的扩展和行的滑动时遇​​到问题。

<div>       
    <div>
        <h2><a href="#laptops" class="exp">Laptops</a></h2>
        <p>Laptops...</p>
    </div>
    <div>
        <h2><a href="#tablets" class="exp">Tablets</a></h2>
        <p>Tablets...</p>

    </div>
    <!--the row below is the one that will expand and move left/right -->       
    <div id="row1" class="expand intro_para">
        <div id="laptops" class="expand block">
            PAGE FOR Laptops this includes a lot of info
        </div>

        <div id="tablets" class="expand block">
            Page for tablets  this also includes a lot of info
        </div>
    </div>
</div>

好像：

界面图片

最初突出显示的行将关闭，然后在选择其中一个类别时打开。如果类别已经展开，它将关闭该行，如果选择了其他类别，它将滑动打开到新类别。我想我已经完成了，但是当行滑过时它不会显示新类别。 注意：突出显示的框是唯一会受到影响的东西。

可以将其想象为页面顶部的导航，但您必须单击而不是悬停，并且在菜单切换之间会有动画。

单击类别锚点时，它将运行此功能：

function show(cat) {
console.log("B4side_open"+side_open+"row_open"+row_open+"cat_open"+cat_open);
var tcat = _.where(equipment, {title: cat});
var s = tcat[0].side;
var r = tcat[0].row;
//no row open

if(row_open == "") {
//open row to specified cat
    console.log("open row "+r+" to specified cat "+cat);
    //make category visible (within invisible box)
    $("#"+cat).css({"display": "block"});
    //open the row
    $("#row"+r).slideDown();
    row_open = r;
    side_open = s;
    cat_open = cat;
}
else {
//slide the expando to new cat OR close the exando
    if(s == side_open) {
        //close the expando
        console.log("close the expando for row "+r);
        //close the row
        $("#row"+r).slideUp();
        //make the category invisible (within invisible box)
        //$("#"+cat).css({"display": "none"});
        row_open = "";
        side_open = "";
        cat_open = "";
    }
    else {
        //slide the expando
        if (s == "left") {
            //slide right
            console.log("slide right");
            $("#"+cat).css({"display": "block"});
            $("#row"+r).animate({"margin-left": "0px"}, 1000);
            //make other invisible
        }
        if (s == "right") {
            //slide left
            console.log("slide left");
            console.log(cat+r)
            $("#"+cat).css({"display": "block"});

            //console.log($("#"+cat).css({"display": "block"}));
            $("#row"+r).animate({"margin-left": "-940px"}, 1000);
        }
        //make the category invisible (within invisible box)
        //$("#"+cat).css({"display": "none"});
        side_open = s;
        cat_open = cat;
    }
}
}

更新:: 我一直在努力，我认为它做得对，但最初的打开和滑动，它会跳开而不是动画：/

http://mulibraries.missouri.edu/reference/equipment/equipment.php

4

3 回答 3

1

你需要得到

if (s == "left") {}
if (s == "right") {}

里面

if(row_open == "") {}
于 2013-01-24T20:45:35.397 回答
1

通过扩大选择器并进行一些其他更改，您应该能够消除绝大多数代码。看看这个：

$("a.exp").click(function () {
  var foo = $(this.hash);     

  var leftColumn = $(".expand .block").index(foo) % 2 == 0;
  var animateOut =  { "margin-left": "-924px" };
  var animateIn =  { "margin-left": "0px" }; 
  $(".expand .block").slideUp(400, function() { $(this).animate(animateOut);});
  foo.slideDown(400, function() { foo.animate(animateIn);});
  return false;
});
于 2013-01-24T21:41:55.400 回答
0

修复了它，这是一个 CSS 问题，该行应该是 display:none 并且内部类别应该是 display:block

于 2013-01-24T21:35:08.453 回答