Question

我需要创建自定义样式的选择下拉列表（有三个）表单输入。我使用jquery来完成这个，因为我不知道在CSS中这样做的好方法。我遇到的问题是，尽管搞乱了各种元素的z-index，菜单的下拉还有其他形式的输入。我查看了每个的答案： Why is the drop down menu hiding behind jQuery button?（基本上我遇到的确切问题 - 找不到好的解决方案） Drop down being hidden behind banner button

然而，这些解决方案似乎对我不起作用。您可以在此处查看问题的有效版本：http://jsfiddle.net/SANdM/5/

这是选择代码（其中有3个）：

<select name="data[Product][to_relationship]" class="input-medium" id="to_relationship">
  <option value=""></option>
  <option value="F|1|Mother">Mother</option>
  <option value="M|1|Father">Father</option>
  <option value="M|2|Boyfriend">Boyfriend</option>
  <option value="F|2|Girlfriend">Girlfriend</option>
  <option value="F|3|Friend (F)">Friend (F)</option>
  <option value="M|3|Friend (M)">Friend (M)</option>
</select>

这是将select转换为ul：

的jquery代码

$('select').each(function() {
    //esape the square brackets in the name attribute


    function $escape(string) {
        return string.replace(/([ #;&,.+*~\':"!^$[\]()=>|\/@])/g, '\\$1');
    }

    function $unescape(string) {
        return string.replace(/\\/g, '');
    }
    // create new ul to replace select
    $(this).after('<ul class="select"></ul>');

    // define objects
    var $this = $(this); // exising <select> element
    var $select = $this.next('ul.select').eq(0); // new <ul> version of the select
    var $form = $this.parents('form').eq(0); // the containing form
    // define variables
    var id = $this.attr('id'); // id of the <select>
    // name of the <select>
    var name = $escape($this.attr('name')); // name of the <select>
    // wrap the new ul in a div we can use to anchor positioning
    $select.wrap('<div class="select-container"/>');

    // set a custom data attribute to maintain the name from the original select on the new ul
    $select.data('name', name);
    $select.attr('id', id);
    // grab the first <option> item in the <select> and populate the currently selected (first) option in the ul
    $select.append('<li class="current">' + $('option', $this).eq(0).html() + '<span class="value">' + $('option', $this).eq(0).val() + '</span></li>');

    // duplicate the rest of <option>s in select to ul
    $('option', $this).each(function() {
        $select.append('<li>' + $(this).html() + '<span class="value">' + $(this).val() + '</span></li>');
    });

    // add hidden field to form to capture value from ul
    $form.append('<input type="hidden" name="' + $unescape(name) + '" value="' + $('option', $this).eq(0).val() + '" />');

    // remove the old <select> now that we've built our new ul
    $this.remove();
});
$('.select li.current').click(function() {

    // toggle the visible state of the ul
    $(this).parents('ul.select').toggleClass('active');
});

$('.select li:not(.current)').click(function() {

    // objects
    var $this = $(this);
    var $select = $this.parents('ul').eq(0);
    var $hidden = $('input[name=' + $select.data('name') + ']');
    var $current = $('.current', $select);

    // set the current text
    $current.html($this.html());

    // close the ul
    $select.removeClass('active');

    // populate the hidden input with the new value
    $hidden.val($this.find('.value').text());
});
$('body, html').mouseup(function() {
    if ($('.select.active').length != 0) {$('.select.active').removeClass('active');}
});

用来设计样式的CSS是：

.select-container {
    float: left;
    height: 40px;
    min-width: 170px;
    margin-right: 10px;
    position:relative;
}
.pull-left{float:left}


ul.select {
    list-style: none;
    color: #ee3925;
    width: 170px;
    border: 3px solid #ee3925;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
      border-radius: 8px;
    position: absolute;
    background-color:#FFF;
}


ul.select li {
    min-width: 100px;
    padding:0 10px;
    height: 30px;
    line-height: 30px;
    border: 0px solid #FFF;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    background-color:#FFF;
}

ul.select li:not(.current) {
   display: none;

}

ul.select.active li {
    display: block;
}

ul.select li.current {
    cursor: pointer;
    font-weight:bold;
}

ul.select li:hover {
    cursor: pointer;
}

.value{display:none;}

任何帮助将不胜感激

Answer 1

只需设置元素活动类的z-index css属性：

.active{z-index:9999}

http://jsfiddle.net/2FbWg/

为什么我的自定义样式选择下拉表单落后于其他表单？

1 个答案: