JQuery Click函數只工作一次

我試圖使用jQuery點擊方法來顯示和隱藏我的部分後點擊頁面的某個部分。JQuery Click函數只工作一次

我的HTML代碼：

<section class="apply_section text-center center-block" id="apply_section"> 
     <div class="apply_container"> 

     <div class="container"> 
      <div class="row apply_row"> 

      <div class="col-md-8 apply_form"> 
       <form class="form" action="mail.php" method="POST"> 
       <div class="col-md-6"> 
        <div class="form-group"> 
        <input class="form-control" type="text" placeholder="" required="required" name="firstName"> 
        </div> 

       <div class="col-md-6"> 
        <form class="form"> 
        <div class="form-group"> 
         <textarea class="form-control" placeholder="" required="required" name="message"></textarea> 
        </div> 
        </form> 
        <input class="btn btn-success btn-block" type="submit" value=""></input> 
       </div> 

       </form> 
      </div> 

      <div class="col-md-4 apply_image"> 
       <a><img src="images/icon.png" alt=""></a> 
      </div> 

      </div> 
     </div> 

     </div> 

    </section>

jQuery的腳本：

$('#apply_section .apply_image a').click(function(){ 
    if($('#apply_section .apply_form').css('display','none')) { 
    $('#apply_section .apply_form').css('display','inline-block'); 
    }else {$('#apply_section .apply_form').css('display','none');} 
});

的問題是，點擊方法以訂單只是一個時間，如果我在圖像上單擊窗體會出現，但在此之後，如果我需要再次隱藏並單擊圖像不起作用！

來源

2017-04-24 Yaser AlAzem

取代'如果（$（ '＃apply_section .apply_form'）的CSS（ '顯示'， '無'）。）'use'if（$（'＃apply_section .apply_form'）。css（'display'）=='none'）'...更好的方法是使用jquery'.toggle（）'函數。 –

...或創建一個類並使用[.toggleClass（）]（http://api.jquery.com/toggleclass/） – gaetanoM

感謝@karteyya Khosta，它的工作。多麼愚蠢的錯誤：D –

這不是你如何檢查CSS屬性。

$('#apply_section .apply_image a').click(function() { 
    if ($('#apply_section .apply_form').css('display') == 'none') { // Here, check if display value is 'none' 
    $('#apply_section .apply_form').css('display', 'inline-block'); 
    } else { 
    $('#apply_section .apply_form').css('display', 'none'); 
    } 
});

來源

2017-04-24 18:23:53 Oen44

做出這樣的錯誤真是太遺憾了！：D在@ Oen44工作了很久，它應該是這樣。 –

很高興我幫了忙。不要忘記接受我的回答;） – Oen44

另一種方法使用切換：

$('#apply_section .apply_image a').click(function() { 
    var boolean = $('#apply_section .apply_form').css('display') == 'none'; 
     $('#apply_section .apply_form').toggle(boolean) 
});

據jQuery的切換文檔： The matched elements will be revealed or hidden immediately, with no animation, by changing the CSS display property. If the element is initially displayed, it will be hidden; if hidden, it will be shown. The display property is saved and restored as needed. If an element has a display value of inline, then is hidden and shown, it will once again be displayed inline.

來源

2017-04-24 18:32:54 funcoding

當OP使用'inline-block'時，'toggle'返回'display：block'。 – Oen44

@ Oen44 - 主要目的是隱藏或顯示元素。不是嗎？ – funcoding

但是'block'和'inline-block'顯示有區別，可能會影響頁面的外觀。 – Oen44

-1

一個更好的辦法做這樣的事情是使用一個切換到一個類：

CSS

.hide { 
    display:none; 
}

jQuery的

$('#apply_section .apply_image a').click(function(){ 
     $('#apply_section .apply_form').toggleClass('hide'); 
});

來源

2017-04-24 18:36:04

沒有標籤'css'包含和OP沒有說使用CSS，不要發佈與OP問題無關的答案。 – Oen44

-1

簡化您的使用代碼切換（）：

$('#apply_section .apply_image a').click(function(){ 
    $('#apply_section .apply_form').toggle(); 
});

來源

2017-04-24 18:36:28 Gerard

JQuery Click函數只工作一次

回答

相關問題