Применение CSS с JQuery останавливает <select>от отображения раскрывающегося списка - PullRequest
Новая
       4

Применение CSS с JQuery останавливает <select>от отображения раскрывающегося списка

0 голосов
/ 07 октября 2009

Итак, у меня есть несколько <select> тегов, которые я хотел бы показать все содержимое в IE. Я осмотрелся и нашел несколько исправлений , но я не хочу включать YUI, так как я уже использую jQuery в другом месте, и предпочел бы оставить селекторы вместо замены на DIV.

В коде, который я придумал, FF3 прекрасно работает. В Internet Explorer (6,7,8) первый щелчок по <select> мигает раскрывающимся списком, а затем исчезает. Я пробовал focus и mousedown вместо события click в коде, но безуспешно.

Если я уберу оба параметра element.css в autoWidth, выпадающие списки будут работать, как и ожидалось, без дополнительной ширины. Кто-нибудь знает, что может привести к тому, что настройка css приведет к сбою в IE? 

<head>
 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> 
 <script type="text/javascript">
 var count = 0;
 autoWidth = function(e) {
  $element = $(e.target)
  $element.css("width","auto");
  if($element.width() < $element.data("originalWidth"))
  {
   $element.css("width", $element.data("originalCSSWidth"));
  }
 }
 resetWidth = function(e) {
  $element = $(e.target)
  $element.css("width", $element.data("originalCSSWidth"));
  $("#counter").text(++count);
 }
 recordEvent = function(e) {
  $("#event").text($("#event").text() + " " + e.type);
 }
 dropDownIEWidthFix = function() {
 //if($.browser.msie)
 //{
  $dropDown = $(this);
  $dropDown.data("originalWidth", $dropDown.width());
  $dropDown.data("originalCSSWidth", $dropDown.css("width"));
  $dropDown.blur(recordEvent);
  $dropDown.blur(resetWidth);
  $dropDown.change(recordEvent);
  $dropDown.change(resetWidth);
  $dropDown.click(recordEvent);
  $dropDown.click(autoWidth);
 //}
 };
 $(function() {
  $("select.officeItemList").each(dropDownIEWidthFix);
 });
 function trackingSelectionChanged(select)
 {
  $("#event").text($("#event").text() + " inlineOnChange");
 }
 </script>
</head>
<body>
 <div style="overflow:hidden;width:148px;">
  <select class="officeItemList" style="width:148px;" onchange="trackingSelectionChanged(this);">
   <option value="1">erasersdffffffffffeeefefsdfsdfsdfsdfsdfsdfsdfsdfsdfdsfsdfefesf</option>
   <option value="3">pencil</option>
   <option value="4">ruler</option>
   <option value="5">ink</option>
   <option value="7">A4 paper</option>
   <option value="8">A3 paper</option>
   <option value="9">erasersdffffffffffeeefefsdfsdfsdfsdfsdfsdfsdfsdfsdfdsfsdfefesf</option>
   <option value="10">executive</option>
   <option value="11">janitor</option>
   <option value="12">developer</option>
  </select>
 </div>
 <div style="overflow:hidden;width:160px;">
  <select class="officeItemList" style="width:160px;" onchange="trackingSelectionChanged(this);">
   <option value="3">pencil</option>
   <option value="4">ruler</option>
   <option value="5">ink</option>
   <option value="7">A4 paper</option>
   <option value="8">A3 paper</option>
   <option value="9">erasersdffffffffffeeefefsdfsdfsdfsdfsdfsdfsdfsdfsdfdsfsdfefesf</option>
   <option value="10">executive</option>
   <option value="11">janitor</option>
   <option value="12">developer</option>
  </select>
 </div>
 <div style="overflow:hidden;width:160px;">
  <select class="officeItemList" style="width:160px;" onchange="trackingSelectionChanged(this);">
   <option value="1">eee</option>
   <option value="3">pencil</option>
   <option value="4">ruler</option>
   <option value="5">ink</option>
   <option value="7">A4 paper</option>
   <option value="8">A3 paper</option>
   <option value="9">ffff</option>
   <option value="10">executive</option>
   <option value="11">janitor</option>
  </select>
 </div>
 <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
 AdjustWidth fired :<span id="counter"></span> times
 <div id="event"></div>
</body>

1 Ответ

1 голос
/ 07 октября 2009

Похоже, проблема в рендеринге выпадающих списков в IE. Если вы измените CSS на <select>, выпадающий список сбрасывается (мерцание при первом щелчке).

Таким образом, использование события mousedown вместо click исправляет первые два раскрывающихся списка, но из-за дополнительного сброса в третьем раскрывающемся списке (поскольку он уже достаточно велик) прерывает собственное событие изменения IE (удаление значение down никогда не меняется независимо от того, какие параметры вы нажимаете).

Решение: при начальной загрузке страницы - не связывать события, если раскрывающийся список уже достаточно велик. Я переключил ширину на автоматический и измерил <select>, а затем связывал события изменения ширины только тогда, когда это нужно в раскрывающихся списках, вы можете избежать событий для других раскрывающихся списков.

Вот проверенный код IE 6,7,8. FireFox работает правильно с того же самого, что и Safari. Вы можете увидеть строку, закомментированную с исправлением IE6, эта строка, если ее удалить, вызывает исходное (неправильное) поведение в IE6. Если честно, я не уверен почему. 

<head>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>  
        <script type="text/javascript">
dropDownIEWidthFix = function() {
if($.browser.msie) {
    $dropDown = $(this);
    $dropDown.data("originalWidth", $dropDown.width());
    $dropDown.data("originalCSSWidth", $dropDown.css("width"));
    $dropDown.css("width", "auto");
    if($dropDown.width() > $dropDown.data("originalWidth")) {
        $dropDown.blur(function(e) {
            $element = $(e.target);
            $element.css("width", $element.data("originalCSSWidth"));
        });
        $dropDown.change(function(e) {
            $element = $(e.target);
            $element.css("width", $element.data("originalCSSWidth"));
        });
        $dropDown.mousedown(function(e) {
            $element = $(e.target);
            $element.css("width","auto");
            $element.width(); //IE6 fix.
        });
    }
    $dropDown.css("width", $dropDown.data("originalCSSWidth"));
}}
$(function() {
    $("select.officeItemList").each(dropDownIEWidthFix);
});
function trackingSelectionChanged(select)
{
}
</script>
</head>
<body>
    <div style="float: left; display: inline; width: 160px;">
        <div class="FUNCOptionTitle">
            <span style="text-align: right;">col1</span>
        </div>
        <div style="overflow:hidden;width:148px;">
            <select class="officeItemList" style="width:148px;" onchange="trackingSelectionChanged(this);">
                <option value="1">erasersdffffffffffeeefefsdfsdfsdfsdfsdfsdfsdfsdfsdfdsfsdfefesf</option>
                <option value="3">pencil</option>
                <option value="4">ruler</option>
                <option value="5">ink</option>
                <option value="7">A4 paper</option>
                <option value="8">A3 paper</option>
                <option value="9">erasersdffffffffffeeefefsdfsdfsdfsdfsdfsdfsdfsdfsdfdsfsdfefesf</option>
                <option value="10">executive</option>
                <option value="11">janitor</option>
                <option value="12">developer</option>
            </select>
        </div>
    </div>
    <div style="float: left; display: inline; width: 165px;">
        <div class="FUNCOptionTitle">
            <span style="text-align: right;">col2</span>
        </div>
        <div style="overflow:hidden;width:160px;">
            <select class="officeItemList" style="width:160px;" onchange="trackingSelectionChanged(this);">
                <option value="3">pencil</option>
                <option value="4">ruler</option>
                <option value="5">ink</option>
                <option value="7">A4 paper</option>
                <option value="8">A3 paper</option>
                <option value="9">erasersdffffffffffeeefefsdfsdfsdfsdfsdfsdfsdfsdfsdfdsfsdfefesf</option>
                <option value="10">executive</option>
                <option value="11">janitor</option>
                <option value="12">developer</option>
            </select>
        </div>
    </div>
    <div style="float: left; display: inline; width: 165px;">
        <div class="FUNCOptionTitle">
            <span style="text-align: right;">col3</span>
            </div>
        <div style="overflow:hidden;width:160px;">
            <select class="officeItemList" style="width:160px;" onchange="trackingSelectionChanged(this);">
                <option value="1">eee</option>
                <option value="3">pencil</option>
                <option value="4">ruler</option>
                <option value="5">ink</option>
                <option value="7">A4 paper</option>
                <option value="8">A3 paper</option>
                <option value="9">ffff</option>
                <option value="10">executive</option>
                <option value="11">janitor</option>
            </select>
        </div>
    </div>
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    AdjustWidth fired :<span id="counter"></span> times
    <div id="event"></div>
</body>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...