Question

现在在我的网站上我有一个选项，只有很少的选项，当我点击它选择是打开的，看到所有选项是否有任何方法使其悬停而不是点击？

<div class="control">
<select id="limiter" class="limiter-options" data-role="limiter">
<option value="24" selected="selected"> 24 per page </option>
<option value="48"> 48 per page </option>
<option value="72"> 72 per page </option>
<option value="all"> All per page </option>
</select>
</div>

我尝试使用此脚本，但效果不佳：

jQuery('#limiter').hover(function() {

  jQuery(this).attr('size', jQuery('option').length);
}, function() {

  jQuery(this).attr('size', 1);
});

Answer 1

$("#limiter").mouseover(function(){
  $(this)[0].size=$(this).find("option").length;
});
$("#limiter").click(function(){
   $(this)[0].size=0;
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="control">
<select id="limiter" class="limiter-options" data-role="limiter">
<option >Please Select </option>
<option value="24" selected="selected"> 24 per page </option>
<option value="48"> 48 per page </option>
<option value="72"> 72 per page </option>
<option value="all"> All per page </option>
</select>
</div>

Answer 2

你能模拟一次点击：

$('#limiter').hover(function() {
          $(this).click();
});

Answer 3

这是您最好的解决方案！您必须更改选择尺寸on mouseover，然后将其更改回on mouseout

$(document).ready(function() {
  $("select.open-on-hover").on("mouseover", function() {
    var l = $(this).find("option").length ;
    
    $(this).attr("size", l) ;
  }) ;
  
  $("select.open-on-hover").on("mouseout", function() {
    $(this).attr("size", 1) ;
  }) ;
  
  $("select.open-on-hover").on("click", function() {
    $(this).attr("size", 1) ;
  }) ;
});

.holer{
  position: relative;
  margin-right: 50px;
  float: left;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="holer">
  <select class="open-on-hover">
    <option>Opt 1.1</option>
    <option>Opt 1.2</option>
    <option>Opt 1.3</option>
    <option>Opt 1.4</option>
    <option>Opt 1.5</option>
  </select>
</div>

<div class="holer">
  <select class="open-on-hover">
    <option>Opt 2.1</option>
    <option>Opt 2.2</option>
    <option>Opt 2.3</option>
    <option>Opt 2.4</option>
    <option>Opt 2.5</option>
  </select>
</div>

<div class="holer">
  <select class="open-on-hover">
    <option>Opt 3.1</option>
    <option>Opt 3.2</option>
    <option>Opt 3.3</option>
    <option>Opt 3.4</option>
    <option>Opt 3.5</option>
  </select>
</div>

Answer 4

对我来说，你的解决方案有效，因为我将#sorter改为#limiter，因为你没有像分拣机这样的id

match_parent

将鼠标悬停在选择打开的所有选项上

4 个答案: