如何一起使用slidedown和slideup

Question

我想在jquery 中使用slideDown 和slideUp，但不想在一个元素上使用slideToggle。这是我使用的代码，但无法正常工作

$(".p8").click(function(){

$(".u8").slideDown(300);

$(".u8").slideUp(300);

});

我使用的 CSS

<li class="p8">   

 <ul class="u8">    

 <li><div><form><input type="text"></form></div></li>    

 </ul>    

 </li>    

p8是css图标，我想当它点击时，在u8上触发slideDown函数，再次点击时在u8上触发slideUp函数。我在 u8 div 中有一个表单。

现在如果我使用slideToggle 那么slideDown 触发器正确，但是当我点击表单的输入时，它会转到slideUp，因此我不想使用Toggle。

Answer 1

Fiddle Demo

试试这个

$(".p8").click(function(){
    if($(this).hasClass("hide"))
       {
          $(".u8").slideDown(300);
           $(this).removeClass("hide")
       }
    else
    {
         $(".u8").slideUp(300);
        $(this).addClass("hide")
    }

});

Answer 2

试试这个……然后告诉我……

最低版本：

$(".p8").click(function(){
    if(!$(".u8").hasClass("slided")) return $(".u8").addClass("slided").slideDown(300);
    $(".u8").removeClass("slided").slideUp(300);
});

加长版：

如果你需要做其他，如果图标是slidedUp或SlidedDown：

 $(".p8").click(function(){
    if(!$(".u8").hasClass("slided")){
         $(".u8").addClass("slided").slideDown(300);
         //here code when element slideDown
         return;
    }
    $(".u8").removeClass("slided").slideUp(300);
    //here code when element slideUp
});

防止输入点击事件传播

添加此代码：

$(".p8 input").on("click",function(){
    return false; //returning false prevent event propagation
});

工作示例 :: http://jsfiddle.net/Frogmouth/xv0Lk9qf/1/