5

HTML フォームを作成していますが、いくつかのフィールドを [詳細オプション] の下に配置したいと考えています。ユーザーがリンクまたは記号をクリックすると、それらの高度なフィールドが表示されるように、おそらく「プラス」記号を使用して「高度なオプション」リンクを作成したいと考えています。JavaScriptでこれを行うにはどうすればよいですか? Google で「高度なオプションの非表示/表示」などを検索してみましたが、解決策が見つかりません。

<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>

たとえば、ここでは「コメント」フィールドを進めたいとします。

4

4 に答える 4

8 
<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 要素を非表示にします。タグをクリックすると、advancedOptions が非表示かどうかがチェックされます。非表示の場合は表示されます。必要になるだろう;

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

使用しているページの上部に、JQuery であることはわかっていますが、今後の参考のために JQuery を学習すると便利です。

于 2013-05-27T19:21:51.773 に答える
0

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;
}

そして...念のため

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

これにより、divの親オブジェクト（div要素を含むもの）に関連するフローティングダイアログ（altのようなもの）が配置されます...

単純 ;）

于 2013-05-27T19:32:57.157 に答える
0

このコードを試してください。ここにデモがあります

<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-27T19:43:48.543 に答える