Question

当通过jQuery select事件点击select元素时，我从mousedown元素中删除了一个类。选择菜单关闭后，如何重新添加此课程？

JSFiddle http://jsfiddle.net/YvCHW/4274/

＆＃13;

$("select.desired").mousedown(function(){
    $(this).removeClass('desired');
});

＆＃13;

select {
   margin: 30px 10px;
    border: 1px solid #111;
   background: transparent;
   border: 1px solid #ccc;
   padding: 5px 10px;
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
} 
select.desired {
    font-size: 30px;
    color: blue;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<select class="desired">
    <option>Apples</option>
    <option  class="selected" selected>Pineapples</option>
    <option>Chocklate</option>
    <option>Pancakes</option>
</select>

＆＃13;

Answer 1

愚蠢到可以工作：

$('.special').on('mousedown', function(){
        $(this).toggleClass('some');
    })
    .on('mouseup', function(){
        $(this).toggleClass('some');
    })
    .on('click', function(){
        $(this).toggleClass('some');
    });

Answer 2

您可能想尝试对焦和模糊/更改。

$("select.desired").on("blur change focus", function (evt){
    $(this).toggleClass('desired', evt.type!=="focus");
    //if (evt.type==="change") $(this).blur();
});

select {
   margin: 30px 10px;
    border: 1px solid #111;
   background: transparent;
   border: 1px solid #ccc;
   padding: 5px 10px;
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
} 
select.desired {
    font-size: 30px;
    color: blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<select class="desired">
    <option>Apples</option>
    <option  class="selected" selected>Pineapples</option>
    <option>Chocklate</option>
    <option>Pancakes</option>
</select>

Answer 3

焦点丢失的事件处理程序会有帮助吗？

$("select.desired").focusout(function(){
    $(this).addClass('desired');
});

它似乎适用于JSFiddle（由于某种原因有点滞后......）

Answer 4

<强> jsFiddle Demo

select元素有很多。当您使用click时，它不会在选项上注册，您不能将click事件附加到选项，如果您在select上放置了mouseup处理程序但是mousedown处理程序将select更改为太小，则mouseup从不开火，因为元素会改变位置。

更重要的是，select元素的状态可以根据其焦点，选择或实际更改而改变。它可以更改，也可以在选择后保持不变。所有这些注意到的条件导致相当复杂的事件处理。我将所有逻辑放入jQuery扩展格式，以便它可以像

一样使用

$('select.desired').selectToggle('desired');

这是扩展本身

$.fn.selectToggle = function(className){
 var 
  skip = false,
  prev = true, 
  $select = this.change(function(){
   $select.addClass(className);       
  }).blur(function(){
  if( !skip ){
   $select.addClass(className);
   prev = true;
  }
 });
 this.wrap("<span>").mousedown(function(){
  $select.toggleClass(className);
  skip = true;
  $select.blur().focus();
  skip = false;
 }).click(function(){
  if( prev == $select.hasClass(className)){
   $select.blur().focus();
  }else{
   prev = $select.hasClass(className);
  }
 });  
};

这是一个堆栈片段演示，显示了此问题中给定问题的扩展功能

＆＃13;

$.fn.selectToggle = function(className){
 var 
  skip = false,
  prev = true, 
  $select = this.change(function(){
   $select.addClass(className);       
  }).blur(function(){
  if( !skip ){
   $select.addClass(className);
   prev = true;
  }
 });
 this.wrap("<span>").mousedown(function(){
  $select.toggleClass(className);
  skip = true;
  $select.blur().focus();
  skip = false;
 }).click(function(){
  if( prev == $select.hasClass(className)){
   $select.blur().focus();
  }else{
   prev = $select.hasClass(className);
  }
 });  
};
$('select.desired').selectToggle('desired');

＆＃13;

select {
   margin: 30px 10px;
    border: 1px solid #111;
   background: transparent;
   border: 1px solid #ccc;
   padding: 5px 10px;
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
} 
select.desired {
    font-size: 30px;
    color: blue;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Click an option:<select class="desired">
    <option>Apples</option>
    <option  class="selected" selected>Pineapples</option>
    <option>Chocklate</option>
    <option>Pancakes</option>
</select>

＆＃13;

Answer 5

http://jsfiddle.net/YvCHW/4276/

$("select.desired").click(function(){
    $(this).toggleClass('desired');

});

当select元素关闭时，添加类以选择元素

5 个答案: