2

現在ホバーされているオプションとインラインになるように、ドロップダウンメニューの横にボックスをポップアウトしようとしています。これを説明するのは簡単ではないので、ここに実際の例を示します (Firefox でのみ動作します)。 http://jsfiddle.net/WJaVz/21/

Chrome と IE で試してみましたが、どちらもオプションの mouseenter イベントを認識していないようで、プレビュー ボックスは表示されません。イベントをマウスオーバーとフォーカスに変更しようとしましたが、IE と chrome ではまだ機能しません。(オペラやサファリはまだテストされていません。)

1つのアイデアは、ドロップダウンを順序付けられていないリストにして、ドロップダウンのように見せることです.liにmouseenterイベントがあることを検出できると思います。

誰かがこれに対する解決策を知っているので、ほとんどを再構築せずにすべてではないにしても、現在のブラウザのほとんどで動作しますか?

4

2 に答える 2

2

mcpDESIGNS に感謝します。さらにいくつかのことを試しましたが、役に立ちませんでした。私はそれを順序なしリストとして再構築することになりました。リストをドロップダウン メニューのようにスタイル設定したので、ユーザーが順不同のリストで li をマウスオーバーしたことを簡単に検出できます....これはすべてのブラウザで動作します = WIN 8D

コードは次のとおりです。http://jsfiddle.net/CJbeF/22/

于 2012-09-05T16:11:09.573 に答える
0

@SubstanceDのソリューションは私が見つけた中で最高のものですが、アクセシビリティの問題がいくつかあったため、ラジオボタンのフィールドセットを使用するように作り直しました。

html:

<div id="colourlist">red</div>
<fieldset id="colours">
  <label for="red">red<input type="radio" name="foo" id="red"/></label>
  <label for="blue">blue <input type="radio" name="foo" id="blue"/> </label>
  <label for="green">green<input type="radio" name="foo" id="green"/></label>   
  <label for="orange">orange<input type="radio" name="foo" id="orange"/></label>       
</fieldset>
<div id="preview"></div>

CSS:

body{
    margin: 0;
    padding: 50px;
}
input {
    opacity:0;
}
label {
    display:block;
    height:20px;
}
#colourlist{
    position: absolute;
    border: 1px solid #B5B0AC;
    width: 200px;
    height: 21px;
    background: url('http://www.thermaxindia.com/images/dropdown_arrow.JPG') 180px 0 no-repeat;    
}
label:hover{
    background-color: #3399FF;
}
#colours{
   display: none;
   position: relative;
   top: 22px;
   left: 0;
   width: 200px;
   position: relative;
   border: 1px solid #B5B0AC;
   overflow-y: scroll;
   height:60px;
}
#preview{
   display: none;
   position: relative;
   background-color: #fff;
   border: 1px solid #ccc;
   padding: 10px;
   width: 250px;
   height: 30px;  
}

js:

$("#colours label").on('mouseenter', function(){
    var O = $(this).offset();
    var CO = $("#colours").offset();
    $("#preview").css("top", O.top-150).show();
    $("#preview").css("left", CO.left+160);
    var text = $(this).text();
    $("#preview").css("background-color", text);
});
$("#colours input").on('click', function(){
    var text = $(this).attr("id");
    $("#colourlist").text(text);
    $("#colours").hide();
    $("#preview").hide(); 
});
$("#colourlist").on('click', function(e){
    e.stopPropagation();
    $("#colours").show();   
});
$("body").on('click',function(e){
    $("#colours").hide();
});

これがフィドルです：http://jsfiddle.net/MikeGodin/CJbeF/109/

于 2015-01-22T16:03:19.300 に答える