jQuery使用兩種不同的觸發器切換單個div

我對jQuery的知識有限...我需要有關單個div的特定實例的幫助，當單擊其中一個觸發器時，該切換將被切換。現在的問題是，如果使用了一個觸發器，則必須點擊兩次才能使另一個觸發器正常工作。jQuery使用兩種不同的觸發器切換單個div

這裏是我的jQuery：

jQuery(document).ready(function($) { 

    jQuery(".move").toggle(function(){ 
     jQuery(".contact-container").slideDown('fast'); 
    }, function() { 
     jQuery(".contact-container").slideUp('fast'); 
});

}）;

我的HTML大致是這樣的：

<div class="contact-container"></div> 
<ul> 
    <li class="trigger"></li> 
</ul> 
<a class="trigger"></a>

如果你想看看這對開發網站，你可以在這裏查看它（觸發器是在右上角和「接觸」按鈕在頁腳「接觸」鏈接）：Site Link

來源

2012-07-19 RevConcept

我有一個很難理解你的問題。當你點擊兩個觸發器（你的意思是事件？）中的一個（你如何點擊一個觸發器？）時，你想要有一個div切換（你的意思是幻燈片？）。我只是有點困惑。 – 2012-07-19 22:19:52

我不會說jQuery/JavaScript ...對不起。但我在下面得到了我的答案，謝謝！ – RevConcept 2012-07-19 23:16:53

不知道我得到的問題，我不想去，通過你的WordPress網站看代碼的意圖，但嘗試：

$(document).ready(function() { 
    $(".move").on('click', function(){ 
     $(".contact-container").slideToggle('fast'); 
    }); 
});

如果兩個觸發器元素都具有類「.move」，應該可以正常工作，否則只需將該類添加到兩個觸發器元素即可！

它現在不工作的原因是因爲toggle功能跟蹤兩個不同元素的狀態，類爲「.move」，但不知道滑動的「.contact-container」元素是可見的還是不。使用slideToggle代替將解決這個問題。

來源

2012-07-19 22:19:41 adeneo

謝謝！我知道這是問題......只是不知道如何解決這個問題。 jQuery給了我惡夢。 – RevConcept 2012-07-19 22:31:11

+1分鐘用於打我的答案。 :) – 2012-07-19 22:31:55

@JasonTowne - 實際上，它花了你大約十分鐘的時間來編輯它，所以它看起來就像我的:-) ..... – adeneo 2012-07-19 22:34:42

首先，the fiddle。

你可以使用jQuery的.toggle()方法來做到這一點。它會根據需要自動顯示或隱藏元素。

您還可以按類而不是按特定ID設置click處理程序。這樣，每當有這個類的元素（在我的例子中，我使用toggle-button）它將調用點擊處理函數。

更新：我改變了我的示例，以匹配您上面張貼的示例代碼。

<ul> 
    <li class="trigger">Trigger 1</li> 
</ul> 
<a class="trigger">Trigger 2</a> 

<div style="height: 400px; width: 400px; background-color:red;" class="contact-container"></div>

$(document).ready(function() { 
    $('.trigger').on('click', function(e) { 
     e.preventDefault(); 
     $('.contact-container').slideToggle('fast'); 
    }); 
});

來源

2012-07-19 22:21:02

jQuery使用兩種不同的觸發器切換單個div

回答

相關問題