1

誰かが私のコードを微調整して、私が探している機能を取得できるかどうか疑問に思っています。ここに何かが足りません。もうすぐです。問題は、メニュー項目がリストから選択されたときに、上に移動されずに複製されることです。次に、このメニューをもう一度クリックしてドロップダウンすると、メニューに同じ項目が2つ表示されます。理想的には、選択したメニュー項目を一番上に移動し、メニューに重複するコンテンツがないようにする必要があります。ここでjsfiddleで動作するプロトタイプを見てください：

デモ

また、メニュー項目内のテキストを中央に配置し、左マージンを10pxにすることができるかどうか疑問に思っています。作ってみましたが、思ったほど簡単ではありません。よろしくお願いします。

4

2 に答える 2

1

必要なのはこれだけです。

デモフィドル

$(document).ready(function() {
     
    var temp = '';
    
    $('.dropdown dt:eq(0)').on('click',function(){
        $('.dropdown dd ul').toggle();
    });
    
    $('dl.dropdown li').on('click',function(){
        $thisA = $('a', this);
        temp = $thisA.text();
        $thisA.closest('li').hide().siblings('li').show();
        $('.dropdown span').text(temp);
        $('.dropdown dd ul').hide();
    });

});
于 2012-05-16T20:58:36.960 に答える
1

これを試して：

$(".dropdown dd ul li a").click(function() {
    $(".dropdown dd ul li a").css("display", "block");
    var text = $(this).html();
    $(this).css("display", "none");
    $(".dropdown dt a span").html(text);
    $(".dropdown dd ul").hide();
    $("#result").html("Selected value is: " + getSelectedValue("sample"));
});

http://jsfiddle.net/DAgGP/3/

css部分には、text-indentを使用できます。

.dropdown dd ul li a {
   text-indent: 10px;
}
于 2012-05-16T20:55:03.653 に答える