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);
});

扩展版本：

如果你需要做其他事，如果icon是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/

如何一起使用滑动和滑动

2 个答案:

最低版本：

扩展版本：

阻止输入点击事件传播