Question

我正在使用jQuery 1.12。我通过采用常规的SELECT菜单创建了一个风格化的选择mneu（使用UL和LI），应用以下样式

.select-options {
  display: none;
  position: absolute;
  top: 100%;
  right: 0;
  left: 0;
  z-index: 999;
  margin: 0;
  padding: 0;
  list-style: none;
  background-color: #737373;
  overflow: scroll;
}

.select-options li {
  margin: 0;
  padding: 12px 0;
  text-indent: 15px;
  border-top: 1px solid #676767;
  -webkit-transition: all 0.15s ease-in;
  transition: all 0.15s ease-in;
}

.select-options li.selected {
  color: gray;
  background: #fff;
}

.select-options li[rel="hide"] {
  display: none;
}


ul.select-options {
  max-height: 15em;
  overflow-y: scroll;
  overflow-x: hidden;
}

并使用JS

function styleSelectMenu(selectMenu)
{
    var $this = $(selectMenu), numberOfOptions = $(selectMenu).children('option').length;

        /*** NEW - start ***/
        var $paddingCalculator = $('<div />', {
            'class' : "select-styled test"
    }).css({
            width : 0,
        visibility : "hidden"
    }).appendTo("body");
    $this.addClass('select-hidden');
    var paddingWidth = $paddingCalculator.outerWidth() + 10;
    $paddingCalculator.remove();

    var selectWidth = $this.outerWidth() + paddingWidth;
    var clickHandled = false;

    if ( !$this.parent().hasClass('select') ) {
            var $wrapper = $("<div />", {
                'class' : "select", 
            'tabIndex' : '1' 
        }).css({
                width   : selectWidth
        }).focus(function() {
        $(this).find('.select-styled').click(); 
    }).blur(function() {
        clickHandled = false;
            $(this).find(".select-options li").removeClass("selected");
        $(this).find('.select-styled').removeClass('active').next('ul.select-options').hide(); 
    });
        $this.wrap( $wrapper );
    }   // if

    if ( !$this.next().hasClass('select-styled') ) {
        $this.after('<div class="select-styled"></div>');
    }    // if

    var $styledSelect = $this.next('div.select-styled');
    $styledSelect.text($this.children('option').eq(0).text());

    if ( $styledSelect.parent().find('ul').length > 0 ) {
        $styledSelect.parent().find('ul').remove();
    }   // if
    var $list = $('<ul />', {
        'class': 'select-options'
    }).insertAfter($styledSelect);

    for (var i = 0; i < numberOfOptions; i++) {
        $('<li />', {
            text: $this.children('option').eq(i).text(),
            rel: $this.children('option').eq(i).val()
        }).appendTo($list);
    }

    var $listItems = $list.children('li');

    // This is the event when someone opens the list
    $styledSelect.unbind('click')
    $styledSelect.click(function(e) {
    //if(clickHandled) {  
        //    clickHandled = false; 
        //} else {
            clickHandled = true;
            e.stopPropagation();
            $('div.select-styled.active').each(function(){
                $(this).removeClass('active').next('ul.select-options').hide();
            });
            $(this).toggleClass('active').next('ul.select-options').toggle();
            var selectedIndex = $(this).parent().find('select option:selected').index();         
            selectedElement = $(this).parent().find(".select-options li")[selectedIndex];
            $(selectedElement).addClass("selected"); 
            selectedElement.scrollIntoView(false); 
        //} // if 
    });

    // This is the event when someone actually selects something from the list
    $listItems.unbind('click.selectStyledItem')
    $listItems.bind('click.selectStyledItem', function(event) {
         clickListItem(event, $styledSelect, $this, $(this), $list);
    });

    $(document).click(function(event) {
        $styledSelect.removeClass('active');
        $list.hide();
    });

    var selectedIndex = $this[0].selectedIndex;
    if (selectedIndex > 0) {
        var name = $this.attr("name")
        var selectedText = $( "select[name='" + name + "'] option:selected" ).text();
        selectItemFromStyledList($styledSelect, $this, selectedText, $list);
    }   // if

    var parent = $this.parent()
    $(parent).bind('keydown', function(event) {
        var currentElement = $(this).find(".select-options li.selected");
        if (currentElement.length == 0) {
            currentElement = $(this).find(".select-options li")[0];
            $(currentElement).addClass("selected");
            return;
        }       // if
        var nextElement;
        switch(event.keyCode){
        // case up
        case 38:
            nextElement = $(this).find(".select-options li")[($(this).find(".select-options li").index(currentElement) - 1) % $(this).find(".select-options li").length];
            break;
    // case down 
        case 40:
            nextElement = $(this).find(".select-options li")[($(this).find(".select-options li").index(currentElement) + 1) % $(this).find(".select-options li").length];
            break;
    // case <ENTER>
        case 13:
            var currentElement = $(this).find(".select-options li.selected");
            $(currentElement).click(); 
            break;
    // case escape 
    case 27:
        $(this).blur(); 
        }
        $(this).find(".select-options li").removeClass("selected");
        if(nextElement) {
            $(nextElement).addClass("selected");
        nextElement.scrollIntoView(false); 
        }
    });

    var keyUps = "", timeOut, $selectOptions = $('.select-options'); 
    $(parent).bind('keyup', function(event) {
    if(!$selectOptions.prev().hasClass('active')){
            return false;
    }
    if(event.keyCode){
        keyUps += event.key;
        retrieveFromOptions($selectOptions,keyUps);
    }
    clearTimeout(timeOut);
    timeOut = setTimeout(function(){
        keyUps = "";
    },250); 
    });

    $listItems.hover(
    function(e) {
        $(this).addClass("selected");
    },
    function(e) {
        $(this).closest(".select-options").find("li.selected").removeClass("selected");
    }
    );

}

这是一个说明here的小提琴。我的问题是，对于移动浏览器（例如屏幕宽度<= 500），当有人点击它时，如何使我的自定义菜单占据整个屏幕 - 也就是说，第一个元素将出现在坐标零，零和每个LI元素的宽度会占据屏幕的整个宽度吗？我基本上试着模拟常规SELECT菜单在手机上的表现。

Answer 1

使用此CSS：

@media only screen and (max-width:501px) {
  .active,
  .active + ul {
    width:100vw;
    height: 100vh;
    max-height: initial;
    position: fixed;
    top:0;
    left:0;
  }
}

<击> Old JSfiddle

更新：试试这个JSfiddle。好的，你的代码读起来有点难，但我认为第35行是罪魁祸首。

如何使我的自定义选择菜单占据整个屏幕的小屏幕宽度？

1 个答案: