Question

我有这个脚本与li列表，如果你点击其中一个列表项，一个框滑动到右边，如果你再次点击，它滑回到它的原始位置（切换）

演示在这里：

http://www.kornar.co.uk/home2.php

我遇到的问题是滑出，我希望面板的宽度为700px

$(".panel").css("width","700px");

滑回来时，我希望宽度为350px，所以它再次隐藏在列表后面。

$(".panel").css("width","350px");

但问题是，当它向后滑动时，它会出现问题，它会隐藏在列表后面，它仍会显示右侧的面板吗？感谢

Answer 1

嘿伙计，我做了一些关于你在整体上尝试实现的假设，但也许这就是你想要做的......以下是我改变的全部内容：

    <script type="text/javascript">
    $(document).ready(function() {

      $('.block').click(function(){
        var id= $(this).attr('id');
        var data_id= $(".data").html();
        var panelPositionLeft=$('.panel').css('left');

        if(panelPositionLeft=='0px') {
          //the .panel is hidden, so slide it out and populate .data with the new id
          $('.panel').animate({left: 350, width:700});
          $('.data').html(id);
        } else if (data_id!=id){
          //something other than the previous .block was clicked and the .panel is obviously open, so don't collapse, just add the new id into .data
          $('.data').html(id);
        } else {
          //neither of the previous situations are true, so it must be that the previously clicked block is being clicked again. Just slide it closed and don't change the value of .data
          $('.panel').animate({left: 0, width: 350});       
        }
      });


      $('.close').click(function(){
        // just slide it closed.
        $('.panel').animate({left: 0, width: 350});
      });

    });

    </script>

还有一些事情你可以清理，但我认为这会更容易阅读和理解。试试这个，让我知道我是否误解了这个问题。

谢谢！

Answer 2

尝试用引号包围“+”（即“+”+ panel.outerWidth（））。我认为这应该有用。

理查德

Answer 3

对于度假参考：如果masondesu没有首先到达那里，我会发布这个。正如你所看到的那样非常相似，但if语句实际上并不需要（就像在masondesu的解决方案中一样。

    $(document).ready(function () {
        $('.block').click(function () {
            var id = $(this).attr('id');
            var data_id = $(".data").html();
            var panel = $('.panel');
            var panel_width = $('.panel').css('left');
            var currLeft = panel.css('left');
            var blockWidth = $(".left").outerWidth();
            if (data_id == id) {
                if (currLeft == "0px") {
                    panel.animate({ left: blockWidth, width: "700px" });
                } else {
                    panel.animate({ left: "0px", width: "350px" });
                }
            }
            else {
                if (currLeft == "0px") {
                    panel.animate({ left: blockWidth, width: "700px" });
                } else {
                    panel.animate({ left: "0px", width: "350px" });
                }
            }
            $('.data').html(id);
            return false;
        });
        $('.close').click(function () {
            var panel = $('.panel');
            var currLeft = panel.css('left');
            if (currLeft == "0px") {
                panel.animate({ left: blockWidth, width: "700px" });
            } else {
                panel.animate({ left: "0px", width: "350px" });
            }
            return false;
        });
    });

此致

理查德

Answer 4

你没有在“li”上调整面板的大小 - 点击它，它只在“.close”上调整大小。所以它不会调整大小;）

在jquery中处理滑动？

4 个答案: