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>