0

わかりました、しばらく前にサイトを作成しましたが、常にメニュー システムに問題がありました。基本的に、地図上の場所をクリックすると、右側のドロップダウン メニューにサブ場所のリストが表示されます。これらは常に、オプション クラスに基づいて表示するチャンスです。

あなたがそれを見ることができるように、私はshiftera.co.ukにサイトを置きました.

まず問題。1) IE - リストは除外されず、クラスに関係なく常にすべての結果が表示されます。2) Chrome - ドロップダウンが押しつぶされて 1 つの結果を表示し、上下の矢印を使用して変更する必要がある他の結果を非表示にすることがあります。3 つ、場合によっては 4 と表示されます。 3) Firefox - リストは、通常のドロップダウン。

問題はCSSの問題または多数のCSSの問題だと思います。

地図リンクの例は

<a href="Scotland#browse" class="areaselect" id="Scotland" title="Scotland">Scotland</a>

分離されていませんが、ドロップダウンリストはデータベースから生成され、次のように表示されます

<option value='AB25 1UH' class="Scotland">Aberdeen</option><option value=' WA14 4DW' class="Northwest">Altrincham</option>

ご覧のとおり、スペースがあるものとないものがあります。ドロップダウンにはapickのIDがあり、以下のcssを使用してロード時に非表示にしています。

#apick { display: none; }

これは、マップのクリックに基づいて正しいアイテムを表示する JavaScript です。

//<![CDATA[ 
$(document).ready(function(){

    $('.areaselect').on('click', function(event){
        $('#apick').css('display','inline');
        var id = $(this).attr('id')
        $('#apick option').not('.'+id).css('display','none');
        $('.'+id).css('display','inline').first().attr('selected','selected');
        event.preventDefault();
    });
}); //]]>

これは長い間私を怒らせてきました.1つの問題を修正すると、別の問題が2〜3作成されるようです. だから私はここで試してみて、ブライトスパークが私の問題を絞り込むことができるかどうかを確認しようと考えました.

  • メイン Web サイトの変更に伴い、Windows の負荷を削除するように更新しました。
4

1 に答える 1

0

簡単な答えは、スタイルをインラインに設定していることです。タグをインラインにする<option>ことや、そのようなスタイルにすることはできません。インラインスタイルが問題を引き起こしています。

<option>代わりに、必要なときにタグを追加してください。すべての値をオブジェクトに保存して、それらを追加/削除します。

ところで。そのウィンドウロードのものを削除します。

ここにJavaScriptの修正があります：

$(document).ready(function()
{
    var options = $('#apick option');
    var values = $.map(options, function(option)
    {
        return option;
    });

    $('.areaselect')
        .on('click', function()
        {
            var apick = $('#apick').empty();
            var id = $(this).attr('id');

            var newValues = $.grep(values, function(n, i)
            {
                return $(n).hasClass(id);
            });

            apick.append(newValues).show().find('option:first').attr('selected','selected');

            return false;
        });
});
于 2013-08-07T13:19:07.263 に答える