如何切換當一個div已被點擊

Question

好傢伙我有下面的代碼片段

<script> 
$(document).ready(function(){ 
$(".ui-radio").click(function(){ 
    $("#textarea").toggle(); 
    return false; 
}); 
}); 
</script> 

然後，我有我在哪裏使用移動Jquery的

<fieldset data-role="controlgroup"> 
<input class="info" id="radio-choice-1" name="opcmessage" title="<?php echo $this->translate->translate("opcsend1","nucleo","En la propiedad, favor de enviarme más información")?>" type="radio" value="1" <?php if($opcmessage==1){?> checked="checked" <?php }?> /> 
<label for="radio-choice-1">&nbsp;En la propiedad, favor de enviarme más información</label> 

<input class="info" id="radio-choice-2" name="opcmessage" title="<?php echo $this->translate->translate("opcsend2","nucleo","En la propiedad, deseo visitarla")?>" type="radio" value="2" <?php if($opcmessage==2){?> checked="" <?php }?> /> 
<label for="radio-choice-2">En la propiedad, deseo visitarla</label> 
<?php if(count($images)<=0){?> 
<input class="info" id="radio-choice-3" name="opcmessage" title="<?php echo $this->translate->translate("opcsend3","nucleo","En la propiedad, envieme fotos")?>" type="radio" value="3" <?php if($opcmessage==3){?> checked="" <?php }?> /> 
<label for="radio-choice-3">En la propiedad, envieme fotos</label> 

<?php }else{?> 

<input class="info" id="radio-choice-4" name="opcmessage" title="<?php echo $this->translate->translate("opcsend4","nucleo","En la propiedad, envieme más fotos")?>" type="radio" value="4" <?php if($opcmessage==4){?> checked="" <?php }?> /> 
<label for="radio-choice-4">En la propiedad, envieme más fotos</label> 
</fieldset > 

這個HTML代碼，我有這樣的文字區域

<div data-role="fieldcontain"> 
    <textarea cols="40" rows="8" name="textarea" id="textarea"></textarea> 
</div> 

我想單擊單選按鈕之一時切換textarea。我可以在普通瀏覽器中切換它，但這在移動設備中無法使用。

如果你知道爲什麼會發生這個問題，請幫我解決？

另外我想顯示在文本區域的單選按鈕的細節。像如果「恩LA propiedad，DESEO visitarla」是slected textarea的應顯示裏面的內容是

編輯1

在沒有經過測試的Mobile JQuery的情況下正常工作。我認爲這個問題是可能的類名，其移動JQuery的瀏覽器上拋出....我很新的這也許是我提前錯 感謝

EDIT 2

添加一個事件

$('.ui-radio').bind('touchend',function(e){ $("#textarea").toggle();

它工作正常，但問題是我只想切換隱藏和取消隱藏，當第一個選項被點擊。現在它可以切換所有的選項，比如它是開放的。當你點擊任何其他選項時，它會關閉。下面是我使用

<script> 
    $(document).ready(function(){ 
    $("#textarea").hide(); 
    $('.ui-radio').bind('touchend',function(e){ 
     $("#textarea").toggle(); 
     return false; 
    }); 
    }); 

</script> 

編輯3

<script> 
$(document).ready(function(){ 
$("#textarea").hide(); 
$('.ui-radio').bind('touchstart',function(e){ 
    $("#textarea").show(); 
    return false; 
}); 
}); 
</script> 

問題是與DIV UI無線電的觸摸行爲的腳本。如果我嘗試觸摸該部分並向下滾動，則無法正常工作。經過Chrome，Opera和Firefox測試。

編輯4

而且我想追加一些內容的int #textarea bbut我不能做到這一點誰能幫我出這一點。

腳本

<script> 
$(document).ready(function(){ 
$("#textarea").hide(); 

$('.ui-radio').bind('touchstart',function(e){ 
    $('<p>En la propiedad, favor de enviarme más información</p>').appendTo('#textarea'); 
    $("#textarea").show(); 
    return false; 
}); 

}); 
</script> 

EDIT 5

<script> 
$(document).ready(function(){ 
$("#textarea").hide(); 

$('.ui-radio').bind('touchstart',function(e){ 
    $("#textarea").show(); 
    var a = $(this).find("label").attr('for'); 
    if(a == "radio-choice-1"){ 
    $("#textarea").html("Estoy interesado(a) en la propiedad, favor de enviarme más información");} 
    if(a == "radio-choice-2"){ 
    $("#textarea").html("Estoy interesado(a) en la propiedad, deseo visitarla");} 
    if(a == "radio-choice-3"){ 
    $("#textarea").html("Estoy interesado(a) en la propiedad, envieme fotos");} 
    if(a == "radio-choice-4"){ 
    $("#textarea").html("Estoy interesado(a) en la propiedad, envieme más fotos");} 
    return false; 
}); 

}); 
</script> 

這就是我想出了它的腳本工作正常，但正如我所說的觸摸行爲effectig的jQuery等功效和頁面中的Mobile JQuery。請建議我的東西我應該做的

編輯6

這裏是它的小提琴http://jsfiddle.net/7GY8K/

我的問題是，如果你點擊單選按鈕的選項時，它應該打開的textarea但沒有發生。但是，如果同樣的代碼，我在正常網頁中添加這是不正常工作的超鏈接，請看看

Answer 1

您應該綁定touchstart或touchend移動事件。 試試這個：

$('.ui-radio').bind('touchstart',function(e){ 
    $("#textarea").toggle(); 
}); 

Answer 2

在火中的移動設備的情況下，你可以嘗試用

更換

$(".ui-radio").click(function()

$(".ui-radio").on('click touch', function()

希望它有幫助。

Answer 3

$(document).ready(function(){ 
    $(".slidingDiv").hide(); 
    $(".show_hide").show(); 

    $('.show_hide').click(function(){ 
    $(".slidingDiv").slideToggle(); 
    }); 
}); 

    <p>Toggle hide show/p> 
    <div class="toggleMe">Toggle between hide() and show()</div> 

Answer 4

<!DOCTYPE html> 
<html> 
<head> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"> 
</script> 
<script> 
$(document).ready(function(){ 
    $(".click_me").click(function(){ 
    $(".hideshow").toggle(); 
    }); 
}); 
</script> 
</head> 
<body> 
<div class="click_me">click me</div> 
<br> 
<br> 
<div class="hideshow">This is a paragraph.</div> 
</body> 
</html>