jQuery sideToggle無法正常工作

Question

我一直在嘗試在我的應用程序中使用jQuery sideToggle函數。

以下是我的代碼。

HTML：

<select class="selectme"> 
    <option value=0>Select an Option</option> 
    <option value=1>Select1</option> 
    <option value=2>Select2</option> 
</select> 
<div class="clickme">Hello 
    <div class="iamhidden">Hello once again</div> 
</div> 

JS：

$(".selectme").on("change",function(){ 
    if($(".selectme").val() == 1){ 
     click(); 
    } 
    else if($(".selectme").val() == 2){ 
     click2(); 
    } 
}); 

function click(){ 
    $(".clickme").on("click",function(){ 
     $(".iamhidden").slideToggle("slow"); 
    }); 
} 
function click2(){ 
    $(".clickme").on("click",function(){ 
     $(".iamhidden").slideToggle("slow"); 
    }); 
} 

CSS：

.clickme{ 
    height: auto; 
} 
.iamhidden{ 
    display: none; 
} 

後，我選擇了一個選項，隨後選擇了其他選項，然後單擊DIV「 clickme「，sideToggle div顯示一段時間然後隱藏。

我是新來的jQuery，我不知道我的代碼有什麼問題。我認爲在代碼中調用兩次的onClick事件可能導致了這個問題，但即使在我嘗試了很多重命名div等選項之後，我也找不到解決方法。

的jsfiddle鏈接：http://jsfiddle.net/63dnapvd/

任何人都可以請幫我解決這個。任何幫助將不勝感激。

謝謝。

Answer 1

您似乎對功能，調用和處理程序感到困惑。如果您正在使用處理程序，那麼只要事件發生，它就會激活。所以不需要將其包裝在函數中，因爲調用函數本身需要再次點擊。

你顯示了你的函數兩次，所以它激活兩次並切換兩次，導致它恢復。

固定在這裏 - http://jsfiddle.net/63dnapvd/2/

$(".clickme").on("click",function(){ 
    $(".iamhidden").slideToggle("slow"); 
}); 

編輯 - 如果你想有一個延遲然後回去了，然後添加一個延遲並再次調用。如下圖所示http://jsfiddle.net/63dnapvd/3/

$(".clickme").on("click",function(){ 
    $(".iamhidden").slideToggle("slow").delay(200).slideToggle("slow"); 
}); 

編輯2：

，如果你需要做的是，當點擊在div後的變化那麼試試這個：

$(".selectme").on("change",function(){ 

     /*Do whatever you needed to do on change here */ 

     $(".clickme").on("click",function(){ 
     $(".iamhidden").slideToggle("slow").delay(200).slideToggle("slow"); 
     }); 
    }); 

，如果你想顯示的元素每改變一次，試試這個：

$(".selectme").on("change",function(){ 
     $(".iamhidden").slideToggle("slow").delay(200).slideToggle("slow"); 
    });