Javascript Jquery event.drag与其他Jquery代码一起出现问题

我这里有点问题，请检查。当我点击灰色按钮时，它将显示，如果我再次点击它，它将隐藏。但如果我拖动（拖动开始）按钮以显示我无法再单击以打开或关闭的内容，我现在不知道有什么问题。当我检查代码并单击按钮时，我可以看到.nursebutton更改了它的值（从0->275和-275->0）。我不知道是什么原因导致函数

slideNurse（）

无法正常执行

我将“扩展”与其他Jquery一起使用，也许这就是问题所在？你们有谁遇到过这个问题吗？你有解决我问题的聪明办法吗？我想要拖动功能和“点击”功能动画

下面是jquery代码

谢谢=）

---

将jquery代码更改为下面的代码，它工作正常（不是很完美，第一次出错时，我不得不添加一个布尔值来跟踪它是否第一次运行）

---

我认为通过一些适当的HTML和CSS，你可以有一个动画而不是两个。不管怎样，他们都朝着同一个方向走，对吗

因此，对于HTML部分，我将确保容器实际上包含一些内容。把它们包起来似乎是正确的方法

对于CSS，我将主容器的

position:relative

与内部容器的

position:absolute

组合在一起。查看小提琴，了解更多变化。设置好后，我开始删除额外的动画

实际的拖动可以通过jQuery UI完成。你是把整个图书馆拿走，还是只拿走可拖动的部分，这取决于你自己

/// <reference path="jQuery 1.9.1" />
/// <reference path="jQuery UI 1.9.2" />
// local vars
var showing = false,
    nurseContainer = $('#nurseContainer'),
    nurseButton = $("#nurseContainer a.nursebutton"),
    nurseView = $("#nurseView");

// drag event: jquery ui can filter much for you
nurseContainer.draggable(
    { 
        axis: "x",
        handle: nurseButton,
        containment: nurseView,
        drag: function(ev, ui){
            // small css position correction
            if (ui.position.left <= 50){
                ui.position.left = 50;
            }
        }
    }
);

// click event: with mouseup you don't fire extra events
nurseButton.mouseup(function(){
    if (!showing) {
        showing = true;
        nurseContainer.animate({ left: 50 }, 400);
    } else {
        showing = false;
        nurseContainer.animate({ left: 325 }, 400); // 50 + 275
    }
});

//
/// 
//局部变量
var=false，
nurseContainer=$（“#nurseContainer”），
nurseButton=$（“#nurseContainer a.nurseButton”），
nurseView=$（“#nurseView”）；
//拖动事件：jquery ui可以为您过滤很多内容
nurseContainer.draggable(
{ 
轴：“x”，
手柄：纽斯巴顿，
遏制：nurseView，
拖动：功能（ev、ui）{
//小型位置校正
如果（ui.position.left
var showing = false;
var first = false;
    jQuery(function($){
    var $div = $('#DragNursecontainer');
      $('.nursebutton')
            .click(function(){
                if(first ==true){
            if (!showing) {
                showing = true;
                $("#nurseView").animate({"left": "1595px"}, "fast");
                $(".nursebutton").animate({"left": "1595px"}, "fast");
            } else {
                showing = false;
                $("#nurseView").animate({"left": "1872px"}, "fast");
                $(".nursebutton").animate({"left": "1872px"}, "fast");
            }
                }
                else{
                    first = true;

                if (!showing) {
                showing = true;
                $("#nurseView").hide(5);
                $("#nurseView").animate({"left": "1595px"}, "fast");
                $("#nurseView").show(5);
                $(".nursebutton").hide(5);
                $(".nursebutton").animate({"left": "1595px"}, "fast");
                $(".nursebutton").show(5);
                } else {
                showing = false;
                $("#nurseView").animate({"left": "1872px"}, "fast");
                $(".nursebutton").animate({"left": "1872px"}, "fast");
                }   //slideNurse();
                }
          })
          .drag("start",function( ev, dd ){
             dd.limit = $div.offset();
             dd.limit.right = dd.limit.left + $div.outerWidth() - $( this ).outerWidth();              
          })
          .drag(function( ev, dd ){
             $( this ).css({
                left: Math.min( dd.limit.right, Math.max( dd.limit.left, dd.offsetX ) )

             });
             $('#nurseView').css({
                left: Math.min( dd.limit.right, Math.max( dd.limit.left, dd.offsetX ) )
            });
          })
          .drag("end",function(ev, dd ){
             var treshold = dd.offsetX;
             var menu = $('#nurseView');
             if(treshold>1712){
                    showing = false;
                    $("#nurseView").animate({"left": "1872px"}, "fast");
                    $(".nursebutton").animate({"left": "1872px"}, "fast");
             }
             else{
                showing = true;
                $("#nurseView").animate({"left": "1595px"}, "fast");
                $(".nursebutton").animate({"left": "1595px"}, "fast");
             }               
          });
    });

/// <reference path="jQuery 1.9.1" />
/// <reference path="jQuery UI 1.9.2" />
// local vars
var showing = false,
    nurseContainer = $('#nurseContainer'),
    nurseButton = $("#nurseContainer a.nursebutton"),
    nurseView = $("#nurseView");

// drag event: jquery ui can filter much for you
nurseContainer.draggable(
    { 
        axis: "x",
        handle: nurseButton,
        containment: nurseView,
        drag: function(ev, ui){
            // small css position correction
            if (ui.position.left <= 50){
                ui.position.left = 50;
            }
        }
    }
);

// click event: with mouseup you don't fire extra events
nurseButton.mouseup(function(){
    if (!showing) {
        showing = true;
        nurseContainer.animate({ left: 50 }, 400);
    } else {
        showing = false;
        nurseContainer.animate({ left: 325 }, 400); // 50 + 275
    }
});