jquery切换不起作用

Question

我已经创建了一个函数我想要一个div来增加高度和不透明度，当再次点击它应该返回到它的原始状态，所以我使用切换功能来做到这一点，现在的问题是，当页面加载按钮获得消失

$(document).ready(function() { 
 
    $('#cm_now').toggle(function() { 
 
    $('.search_bx_ar').css({ 
 
     'opacity': '1' 
 
    }); 
 
    $('.search_bx_ar').css({ 
 
     'height': '40px' 
 
    }); 
 
    }); 
 
});

.search_bx_ar { 
 
    position: relative; 
 
    margin: 0 0 10px 0; 
 
    width: 100%; 
 
    opacity: 0; 
 
    height: 0px; 
 
    transition: ease-in-out all .5s; 
 
    -webkit-transition: ease-in-out all .5s; 
 
    -moz-transition: ease-in-out all .5s; 
 
} 
 

 
.compare_sr_btn { 
 
    float: right; 
 
    width: 25%; 
 
    padding-left: 15px; 
 
    margin: 15px 0 10px 0; 
 
} 
 

 
.compare_sr_btn>#cm_now { 
 
    background-color: #2b7f7f; 
 
    color: #fff; 
 
    border: none; 
 
    height: 40px; 
 
    line-height: 40px; 
 
    width: 100%; 
 
    font-size: 12px; 
 
    text-transform: uppercase; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="compare_sr_btn"> 
 
    <input type="button" id="cm_now" value="Compare Now" /> 
 
</div> 
 
<div class="search_bx_ar"> 
 
    <input class="form-control top_search" id="data_mid" autocomplete="off" onkeyup="autocompl();" type="text" placeholder="Search"> 
 
</div>

Answer 1

切换不会做你仿佛觉得它。切换用于隐藏或显示元素。由于您在加载页面后立即运行该功能，该按钮会立即隐藏，并带有一个漂亮的小动画。

http://api.jquery.com/toggle/

看看这个你想要做什么：

var buttonState = 0; 
 

 
$(document).ready(function() { 
 
    $('#cm_now').click(function() { 
 
     if(buttonState == 0) { 
 
      $('.search_bx_ar').css({'opacity': '1'}); 
 
      $('.search_bx_ar').css({'height' : '40px'}); 
 
    \t } else { 
 
      $('.search_bx_ar').css({'opacity': '0.5'}); 
 
      $('.search_bx_ar').css({'height' : '20px'}); 
 
     } 
 
     buttonState = 1 - buttonState; //a clever way to toggle between 0 and 1 
 
    }); 
 
});

.search_bx_ar { 
 
    position: relative; 
 
    margin: 0 0 10px 0; 
 
    width: 100%; 
 
    opacity: 0; 
 
    height: 0px; 
 
\t transition: ease-in-out all .5s; 
 
\t -webkit-transition: ease-in-out all .5s; 
 
\t -moz-transition: ease-in-out all .5s; 
 
} 
 
.compare_sr_btn { 
 
    float: right; 
 
    width: 25%; 
 
    padding-left: 15px; 
 
    margin: 15px 0 10px 0; 
 
} 
 

 
.compare_sr_btn > #cm_now { 
 
    background-color: #2b7f7f; 
 
    color: #fff; 
 
    border: none; 
 
    height: 40px; 
 
    line-height: 40px; 
 
    width: 100%; 
 
    font-size: 12px; 
 
    text-transform: uppercase; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="compare_sr_btn"> 
 
    <button id="cm_now">Compare Now</button> 
 
</div> 
 
<div class="search_bx_ar"> 
 
    <input class="form-control top_search" id="data_mid" autocomplete="off" onkeyup="autocompl();" type="text" placeholder="Search"> 
 
</div>

Answer 2

在这里，你还没有添加任何点击处理程序[toggle.][2]

你只是调用打开文件准备就绪，这将在dom加载后立即调用。

toggle（）方法在选定的 元素的hide（）和show（）之间切换。

此方法检查所选元素的可见性。如果一个元素被隐藏，则show（）运行 。 hide（）在元素可见时运行 - 此 创建切换效果。

代码片段

$(document).ready(function() { 
 
    $('#cm_now').click(function() { 
 

 
    $('#cm_now').toggle(function() { 
 
     $('.search_bx_ar').css({ 
 
     'opacity': '1' 
 
     }); 
 
     $('.search_bx_ar').css({ 
 
     'height': '40px' 
 
     }); 
 
    }); 
 
    }); 
 
});

.search_bx_ar { 
 
    position: relative; 
 
    margin: 0 0 10px 0; 
 
    width: 100%; 
 
    opacity: 0; 
 
    height: 0px; 
 
    transition: ease-in-out all .5s; 
 
    -webkit-transition: ease-in-out all .5s; 
 
    -moz-transition: ease-in-out all .5s; 
 
} 
 

 
.compare_sr_btn { 
 
    float: right; 
 
    width: 25%; 
 
    padding-left: 15px; 
 
    margin: 15px 0 10px 0; 
 
} 
 

 
.compare_sr_btn>#cm_now { 
 
    background-color: #2b7f7f; 
 
    color: #fff; 
 
    border: none; 
 
    height: 40px; 
 
    line-height: 40px; 
 
    width: 100%; 
 
    font-size: 12px; 
 
    text-transform: uppercase; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="compare_sr_btn"> 
 
    <input type="button" id="cm_now" value="Compare Now" /> 
 
</div> 
 
<div class="search_bx_ar"> 
 
    <input class="form-control top_search" id="data_mid" autocomplete="off" onkeyup="autocompl();" type="text" placeholder="Search"> 
 
</div>

Answer 3

您可以切换您的按钮，当点击它。其他明智的切换和文件准备好后消失。

$(document).ready(function() { 
 
$("#cm_now").on("click", function() { 
 
    $(this).toggle(function() { 
 
    $('.search_bx_ar').css({ 
 
     'opacity': '1' 
 
    }); 
 
    $('.search_bx_ar').css({ 
 
     'height': '40px' 
 
    }); 
 
    }); 
 
    }); 
 
});

.search_bx_ar { 
 
    position: relative; 
 
    margin: 0 0 10px 0; 
 
    width: 100%; 
 
    opacity: 0; 
 
    height: 0px; 
 
    transition: ease-in-out all .5s; 
 
    -webkit-transition: ease-in-out all .5s; 
 
    -moz-transition: ease-in-out all .5s; 
 
} 
 

 
.compare_sr_btn { 
 
    float: right; 
 
    width: 25%; 
 
    padding-left: 15px; 
 
    margin: 15px 0 10px 0; 
 
} 
 

 
.compare_sr_btn>#cm_now { 
 
    background-color: #2b7f7f; 
 
    color: #fff; 
 
    border: none; 
 
    height: 40px; 
 
    line-height: 40px; 
 
    width: 100%; 
 
    font-size: 12px; 
 
    text-transform: uppercase; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="compare_sr_btn"> 
 
    <input type="button" id="cm_now" value="Compare Now" /> 
 
</div> 
 
<div class="search_bx_ar"> 
 
    <input class="form-control top_search" id="data_mid" autocomplete="off" onkeyup="autocompl();" type="text" placeholder="Search"> 
 
</div>

Answer 4

$(".cm_now").click(function() { 
 
    $('.cm_now').toggleClass("seach-animate"); 
 
    });

.search_bx_ar { 
 
    position: relative; 
 
    margin: 0 0 10px 0; 
 
    width: 100%; 
 
    opacity: 0; 
 
    height: 0px; 
 
    transition: ease-in-out all .5s; 
 
    -webkit-transition: ease-in-out all .5s; 
 
    -moz-transition: ease-in-out all .5s; 
 
} 
 

 
.compare_sr_btn { 
 
    float: right; 
 
    width: 25%; 
 
    padding-left: 15px; 
 
    margin: 15px 0 10px 0; 
 
} 
 

 
.cm_now { 
 
    background-color: #2b7f7f; 
 
    color: #fff; 
 
    border: none; 
 
    height: 40px; 
 
    line-height: 40px; 
 
    width: 100%; 
 
    font-size: 12px; 
 
    text-transform: uppercase; 
 
} 
 
.seach-animate { 
 
    height: 10px; 
 
    opacity: 1; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 

 
<div class="compare_sr_btn"> 
 
      <input type="button" class="cm_now" value="Compare Now" /> 
 
     </div> 
 
     <div class="search_bx_ar"> 
 
      <input class="form-control top_search" id="data_mid" autocomplete="off" onkeyup="autocompl();" type="text" placeholder="Search"> 
 
     </div>