Question

所以我有这些JQuery函数：

第一

$(function(){

  //  Accordion Panels
  $(".staffDiv div").hide();

  $(".staffDiv img").hover(function(){

      // $(".staffDetails").slideUp("fast");

      $(this).next(".staffDetails").slideToggle("slow").siblings(".staffDetails:visible").slideUp("fast");
      $(this).toggleClass("current");
      $(this).siblings("div").removeClass("current");

  });
});

第二

$(function(){

    $(".branchDiv").click(function(){
        var toggleWidth = $(this).width() == 450 ? "175px" : "450px";
        $(this).animate({ width: toggleWidth });
    });
});

如果第二个尚未执行，我如何阻止第一个执行呢？

修改这是我现在的新代码：

$(function(){
$(".staffDiv div").hide();
$(".branchDiv").click(function(){
        var toggleWidth = $(this).width() == 450 ? "175px" : "450px";
        $(this).animate({ width: toggleWidth });

        $(".staffDiv div").hide();
          $(".staffDiv img").hover(function(){
              $(this).next(".staffDetails").slideToggle("slow").siblings(".staffDetails:visible").slideUp("fast");
          });
  });
});

编辑这是HTML代码。我应该继续我正在做的事情，还是放弃花哨的效果，制作一个经典的组织结构图？

<div class='branchDiv'> 
<div class='staffDiv'>
    <img class='staffPic' src='images/upload/1378622_10202067392155670_1672420239_n.jpg'/>
    <div class='staffDetails'>
        Name:n m n<br/>
        Position:m<br/>
        Specialization:m34<br/>

    </div>
</div>
</div>

Answer 1

最简单的方法是将第一个嵌套在第二个之内（同步你不做任何异步操作）：

$(function(){
  // this will dictate whether the hover event does anything
  var open = false;

  $(".branchDiv").click(function(){
     var toggleWidth = $(this).width() == 450 ? "175px" : "450px";
     $(this).animate({ width: toggleWidth });
     open = ($(this).width() > 175);
  });

  $(".staffDiv div").hide();

  $(".staffDiv img").hover(function(){
      if(open){
         $(this).next(".staffDetails").slideToggle("slow").siblings(".staffDetails:visible").slideUp("fast");
         $(this).toggleClass("current");
         $(this).siblings("div").removeClass("current");
      }
  });
});

如果第一个应该在onclick内发生，请移动$(this).animate来电下的代码

如何防止jquery函数在执行另一个之前执行

1 个答案: