Question

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

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 1

Toggle不会做你认为它做的事情。切换用于隐藏或显示元素。由于您在加载页面后立即运行该功能，因此立即使用一个漂亮的小动画隐藏该按钮。

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

$(".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>

Answer 4

您可以在点击按钮时切换按钮。其他明智的切换并在文档准备好后消失。

$(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>

jquery切换不起作用

4 个答案: