JavaScriptを使用した高度なオプションを隠す/表示する

私はHTMLフォームを作成しており、いくつかのフィールドを「詳細オプション」にしたいと思います。私は「アドバンスドオプション」のリンクをつけたいと思うかもしれません。そうすれば、ユーザがリンクやサインをクリックすると、それらのアドバンスドフィールドが現れるようになります。 JavaScriptでこれを行うにはどうすればいいですか？ Googleでは「高度なオプションを表示/非表示」のような検索を試みましたが、解決策が見つかりませんでした。JavaScriptを使用した高度なオプションを隠す/表示する

<form ... /> 
    <label> 
     Title 
     <input id="title" name="title" size="40" type="text" value="" /> 
    </label> 
    <label> 
     Year 
     <input id="year" name="year" size="20" type="text" value="" /> 
    </label> 
    <label> 
     Year 
     <input id="comment" name="comment" size="40" type="text" value="" /> 
    </label> 
</form>

たとえば、ここでは「コメント」フィールドを進めたいと考えています。あなたはadvancedOptionsが隠されている場合には、チェックしますそれは、その後であれば、それを非表示になります隠されていない場合は、それはそれが表示されますタグをクリックすると

出典

2013-05-27 Mika H.

あなたはまだ何をしようとしたことがありますか？ –

@ExplosionPillsはい、私は解決策を探してみました。私はJavaScriptの機能がこれをするのかどうかはわかりません。ヒントをお願いしますか？ –

CSSクラス名（またはスタイル属性）を使用して、詳細オプションを非表示にします。「高度なオプションを表示」リンクをクリックすると、JavaScript関数を使用してクラス（またはスタイル属性）を削除します。 –

<a href='#' class='advanced'>Advanced Options</a> 

<div id='advancedOptions'><!-- Form stuff here --></div> 

<script type='text/javascript'> 
    $(document).ready(function() { 
     $('#advancedOptions').hide(); 
     $('.advanced').click(function() { 
      if ($('#advancedOptions').is(':hidden')) { 
       $('#advancedOptions').slideDown(); 
      } else { 
       $('#advancedOptions').slideUp(); 
      } 
     }); 
    }); 
</script>

それは、負荷のadvancedOptions要素を非表示になります。必要になるだろう;あなたが使用しているページの最上部に

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>

が、私はそれがjQueryのを知っているが、今後の参考の

出典

2013-05-27 19:21:51 user2406160

これは私のために働いたが、ページは毎回リロードされ、フォームは入力を失うだろう。これを修正するには、$（ '。advanced'）の代わりに '$（ '。advanced'）をclick（function（e）{'とし、次の行に 'e .preventDefault（）; ' – Daniel

あなたはこのような何かを探しているのためのjQueryを学ぶために有用であろう（ピュアJS）：

function more(obj) { 
    var content = document.getElementById("showMore"); 

    if (content.style.display == "none") { 
     content.style.display = ""; 
     obj.innerHTML = "-"; 
    } else { 
     content.style.display = "none"; 
     obj.innerHTML = "+"; 
    } 
}

この機能は、それが隠されていた場合、あなたのコンテンツの可視性をチェックすることを示し、およびその逆。また、プラス記号をマイナスに変更します。ここで改訂されたHTMLです：

<a href="#" onclick="more(this);">+</a> 
<br> 
<label id="showMore" style="display: none;"> 
    Year 
    <input id="comment" name="comment" size="40" type="text" value="" /> 
</label>

とデモ：http://jsfiddle.net/uSqcg/

出典

2013-05-27 19:26:59 tymeJV

はdiv要素を作成し、それはデフォルトで非表示に持つようにCSSルールを作成し、あなたのdiv要素の上のonmouseoverやイベントONMOUSEOUT追加し、持っていますそれらに関連した機能次

function showSomething(textToShow, container) { 
    var yourElement = $('#yourDivElement'); 
    yourElement.removeClass('hidden'); 

    var w = container.getClientRects()[0].width; 
    var h = container.getClientRects()[0].height; 
    var t = container.getClientRects()[0].top; 
    var l = container.getClientRects()[0].left; 

    var st = document.documentElement.scrollTop; 
    var sl = document.documentElement.scrollLeft; 

    if (st == 0 && document.body.scrollTop > st) 
     st = document.body.scrollTop; 

    if (sl == 0 && document.body.scrollLeft > sl) 
     sl = document.body.scrollLeft; 

    yourElement.css('top', t + st + h/3 * 2); 
    yourElement.css('left', l + sl + w/3 * 2); 

    yourElement.html(textToShow); 

    var lines = textToShow.length/20; 
    yourElement.css('height', 20 + lines * 10); 
} 

function hideSomething() { 
    $('#yourDivElement').addClass('hidden'); 
}

だけ場合（非表示にするCSSルール）

.hidden { 
    display: none; 
}

012に

と...念のため、あなたのdiv（あなたのdiv要素を含むもの）の親オブジェクトに関連

<div onmouseover="showSomething('show this', this);" onmouseout="hideSomething();" class="hidden"></div>

これは（ALTのようなもの）浮動ダイアログを配置します...

シンプル;）

出典

2013-05-27 19:32:57 OscarG

は、ここでは、このコードを試してみてくださいdemo

<html> 
<head> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
<script> 
    $(document).ready(function() { 
     $('.advanced').click(function() 
     { 
     $('#hide').toggleClass("hidden"); 
     }); 
    }); 
</script> 
<style> 
.hidden 
{ 
    display:none; 
} 
</style> 
</head> 
<body> 
     <form > 
     <label> 
      Title 
      <input id="title" name="title" size="40" type="text" value="" /> 
     </label><br/> 
     <label> 
      Year 
      <input id="year" name="year" size="20" type="text" value="" /> 
     </label><br/> 
     <label class="advanced"> 
      + 
     </label><br/> 
     <label id="hide" class="hidden"> 
      Year 
      <input id="comment" name="comment" size="40" type="text" value="" /> 
     </label> 
    </form> 
</body> 
</html>

出典

2013-05-27 19:43:48

JavaScriptを使用した高度なオプションを隠す/表示する

答えて

関連する問題